I am using the following code..actually i want to make an active link which highlights when it is acitive..could someone help me please !!!!
.navbar-container{
width:100%;
height:60px;
background-color:#B22222;
position:fixed;
}
*{
padding:0;
margin:0;
}
.navbar-container ul{
list-style:none;
}
.navbar-container ul li{
width:120px;
height:60px;
float:right;
font-family:calibri;
text-align:center;
line-height:60px;
}
.navbar-container ul li a{
text-decoration:none;
display:block;
color:white;
font-size:15pt;
}
.navbar-container ul li a:hover{
background-color:#620101;
transition:all .3s ease-in-out;
}
Please try this:
.navbar-container ul li a:active {
color: red;
}
Related
I just tried to remove the MagicLine that was built into my Wordpress theme by taking out the CSS code that I'll put below. It worked and the line is gone but now my navigation is all jumpy as you can see at the site: http://sheisbiddy.com/home/ Is there a better way to remove the line (I can't seem to find it in the piles of code that came with the theme) or anyway to get the menu back to normal? Thanks!
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left: 0; display: none; }
This is what is left for the navigation CSS:
#header {height: 100px; padding-top: 20px; margin: 0 auto; }
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation {float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:inline; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:inline; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:inline; padding:0; }
#navigation li:hover ul { display:inline; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
you have an errors in you CSS which causes the navigation to behave this way...
in style.dynamic.php file :
Lines : 94,96,104
#tagline { background-color:; }
#navigation ul li { padding-bottom:px; }
#navigation ul li a { padding-top:px; }
visualisation of problem: http://tinyurl.com/q83t89y
Is there a way to have the browse button to stay on the exact location that it is now?
For example if I resize my window or zoom in / out the browse button leaves its location.
Here is the css:
<style>
ul.Nav2 {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
}
ul.Nav2>li {
position:fixed;
top:0;
right: 25%;
padding:0px;
width:100px;
height:20px;
margin:10px;
z-index: 9999;
float: right;
}
ul.Nav2 li a {
font-family:"Arial";
font-size:15px;
color:#FFF;
display:block;
width:auto;
height:35px;
line-height:20px;
/*removed
text-align:center;
*/
text-decoration:none;
opacity:0.6;
padding:0px 10px;
;
;
;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav2 li a:hover {
opacity:1;
}
ul.Nav2 ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:right;
float:right
/*added*/
display:block;
padding:0;
min-width:9.3ex;
}
ul.Nav2 ul li {
padding-top:1px;
float:none;
}
ul.Nav2 ul a {
white-space:nowrap;
}
ul.Nav2 li:hover ul {
left:inherit;
}
ul.Nav2 li:hover a {
text-decoration:none;
}
ul.Nav2 li:hover ul a {
text-decoration:none;
}
ul.Nav2 li:hover ul li a:hover {
}
</style>
The problem is that ul.Nav2>li has been positioned to the right side of the browser. I think you should leave it alone and...
Create a fixed container <div> like radio bar. (Green box in the example below)
Set an invisible <div> in the center of container. (Red box)
Position the Browse menu to the centered box. (Blue box) Use margin-left to avoid overlapping the radio-bar.
Example: http://jsfiddle.net/Stocki/ZGzb6/
Here is the jsFiddle : http://jsfiddle.net/wQs5a/
What I am trying to do is make is so when you highlight over the parent item,
It is the color gray (#aaaaaa). Then when you go into the submenu I want the submenu
item to be highlighted the same gray (which currently works fine).
But now I want the parent item to return to green (#60a74a) while being
over the submenu item.
Any help would be great. From my research it seems I might need some Javascript
Thanks for any help.
The CSS:
.leftNav {
height:58px;
background: #1c1c1c;
position:relative;
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
width:88px;
z-index:500;
}
.leftNav .table {
/*display:table;*/
margin:0 auto;
}
.leftNav .select,
.leftNav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.leftNav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.leftNav .select a {
display:block;
height:58px;
float:left;
background: #1c1c1c;
padding:0 20px 0 20px;
text-decoration:none;
line-height:58px;
white-space:nowrap;
color:white;
}
.leftNav .select a:hover,
.leftNav .select li:hover a {
background: #aaaaaa;
padding:0 0 0 0px;
cursor:pointer;
color:white;
}
.leftNav .select a:hover strong,
.leftNav .select li:hover a strong {
display:block;
float:left;
padding:0 20px 0 20px;
background:#aaaaaa;
cursor:pointer;
}
.leftNav .select_sub {
display:none;
}
/* IE6 only */
.leftNav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.leftNav .sub {
margin:0 auto;
padding:0;
list-style:none;
font-weight:bold;
}
.leftNav .sub_active .current_sub a,
.leftNav .sub_active a:hover {
background:transparent;
color:white;
}
.leftNav .select :hover .select_sub,
.leftNav .current .show {
display:block;
position:absolute;
top:58px;
background:#60a74a;
padding:0;
z-index:100;
left:-100px;/*this is the alignment for the submenu*/
float:left;
}
.leftNav .current .show {
z-index:10;
}
.leftNav .select :hover .sub li a,
.leftNav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 20px 0 20px;
margin:0;
white-space:nowrap;
border:0;
color:white;
}
.leftNav .current .sub li.sub_show a {
color:white;
cursor:default;
background:#60a74a;
}
.leftNav .select :hover .sub li a:hover,
.leftNav .current .sub li a:hover {
visibility:visible;
color:white;
background:#aaaaaa;
}
.leftNav .select :hover .select_sub,
.leftNav .current .show {
display:block;
position:absolute;
top:58px;
background:#60a74a;
padding:0;
z-index:100;
left:0;/*this is the alignment for the submenu*/
float:left;
}
Welcome to SO! You can add an extra div to the .sub element (select_bg) and position it with margin-top, z-index etc.:
http://jsfiddle.net/wQs5a/1/
Maybe not the best solution because you have to work with exact dimensions but you don't need to use JS. :)
I am trying to make my menu links #666666 and then on hover make it #FFFFFF
i want these colours to change on the text colour and the top border
http://jsfiddle.net/4Xdkn/
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
min-width:120px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-top:25px;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#FFFFFF;
}
Selectors should be
#menu li a {
color: #666;
display: block;
}
#menu li:hover {
border-top-color: #FFF;
}
#menu li:hover a {
color:#FFFFFF;
}
#menu has no direct li descendants so #menu > li:hover does not match anything.
http://jsfiddle.net/4Xdkn/8/
You have an error in your CSS
#menu > li does not target anything, since #menu is applied to a div and it has no direct children of type li.
Use these rules
#menu li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
min-width:120px;
}
#menu li:hover,
#menu li:hover a {
color:#FFFFFF;
}
#menu li a {
color:#666666;
}
#menu li:hover {
border-color:#FFFFFF;
}
Demo at http://jsfiddle.net/gaby/4Xdkn/4/
Updated Fiddle
You need to add:
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #666666;
}
#menu
li a:hover {
border-color:red;
color:#fff
}
On #menu > ul > li remove the border-top and padding, because this has been added to the a tag now.
On #menu > li remove the margin-top property
try this
http://jsfiddle.net/4Xdkn/7/
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
color:#ffffff;
min-width:120px;
}
#menu > li > a {
display:inline-block;
list-style:none;
margin-top:25px;
margin-left:auto;
margin-right:auto;
text-decoration:none;
color:#ffffff;
text-decoration:none;
}
#menu li:hover {
color:#FFFFFF !important;
text-decoration:none;
border-top:4px solid #ffffff;
display:inline-block;
}
#menu li a:hover{
color:#ffffff;
text-decoration:none;
}
}
Colorize the a-element instead of the li and make the a element as big as the li.
#menu li a:hover {
color:white;
border-style:solid;
border-width: 1px 0px 0px 0px;
border-color:white;
}
Try the below css
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:120px;
}
#menu > li {
list-style:none;
padding:25px 0 0 0;
margin-left:auto;
margin-right:auto;
border-top:1px solid #fff;
}
#menu ul li a:hover {
color:#FFFFFF;
}
#menu li a {display:block; padding:20px 0 0 0;border-top:4px solid #666666;}
#menu li a:hover { border-top:4px solid #fff; color:#fff}
i have this site:
www.yoursdproperty.com
i need the top menu items HOME, BUYING PROPERTY, SELLING PROPERTY ETC...
to take up 100% of the width of the top bar. if i add more items, i went them to size accordingly.
here is the CSS associated with this menu bar. is there something i can change here to do that?
/* Moo Menus */
#cssmenu_moo_menu
{ padding:0;
margin:0; }
#cssmenu_moo_menu a
{ float:left;
text-decoration:none;
display:block;
cursor:pointer;
height:35px;
font-size:14px;
font-weight: bold;
line-height:35px;
padding:0 15px;
overflow:hidden;
border-right:1px solid #0d85c9; }
#cssmenu_moo_menu li li a
{ font-weight:bold;
font-size:12px;
border-right:none;
padding:0; }
#cssmenu_moo_menu ul
{ height:35px;
float:left;
list-style:none;
margin:0; }
#cssmenu_moo_menu
{ background:#006198 url(../images/moomenu.png) repeat-x 50% top;
height:35px;
float:left;
list-style:none;
margin:0;
padding:0; }
#cssmenu_moo_menu li li
{ padding:0;
background:none; }
#cssmenu_moo_menu ul ul a
{ color:#000;
display:block;
text-decoration:none;
width:275px;
text-transform:none; }
#cssmenu_moo_menu li
{ float:left;
padding-left:0;
height:35px;
background:transparent; }
#cssmenu_moo_menu ul li
{ position:relative; }
#cssmenu_moo_menu li ul
{ z-index:99;
top:35px;
position:absolute;
left:-999em;
height:auto;
font-weight:normal;
margin:0;
border:0 solid #ddd;
padding:0; }
#cssmenu_moo_menu ul
{ padding:0;
margin-top:0; }
#cssmenu_moo_menu li li
{ float:left;
padding:0;
margin:0;
height:35px;
width:275px; }
#cssmenu_moo_menu li ul ul
{ margin:-25px 0 0 275px; }
#cssmenu_moo_menu li:hover ul ul,#cssmenu_moo_menu li:hover ul ul ul,#cssmenu_moo_menu li:hover ul ul ul ul,#cssmenu_moo_menu li.sfhover ul ul,#cssmenu_moo_menu li.sfhover ul ul ul,#cssmenu_moo_menu li.sfhover ul ul ul ul
{ position:absolute;
left:-999em; }
#cssmenu_moo_menu li:hover ul,#cssmenu_moo_menu li li:hover ul,#cssmenu_moo_menu li li li:hover ul,#cssmenu_moo_menu li li li li:hover ul,#cssmenu_moo_menu li.sfhover ul,#cssmenu_moo_menu li li.sfhover ul,#cssmenu_moo_menu li li li.sfhover ul,#cssmenu_moo_menu li li li li.sfhover ul
{ position:absolute;
left:0; }
#cssmenu_moo_menu ul ul
{ width:275px;
background:#006198; }
#cssmenu_moo_menu ul ul ul
{ width:275px;
padding-bottom:0; }
#cssmenu_moo_menu ul ul li li
{ border-right:0 solid #000; }
#cssmenu_moo_menu a
{ color:#eee;
border-left:1px solid #444; }
#cssmenu_moo_menu a:hover
{ color:#303030; }
#cssmenu_moo_menu li.active a
{ color:#303030; }
#cssmenu_moo_menu li li a
{ color:#fff; }
#cssmenu_moo_menu li li a:hover
{ color:#303030; }
#cssmenu_moo_menu li li a:active
{ color:#eee; }
#cssmenu_moo_menu ul ul li a
{ padding:0 10px; }
#cssmenu_moo_menu ul ul li.active
{ ; }
#cssmenu_moo_menu li.active
{ background:url(../images/moomenu1.png) repeat-x top #303030; }
#cssmenu_moo_menu li a:hover,#cssmenu_moo_menu li a:active
{ color:#303030; }
#cssmenu_moo_menup
{ height:20px;
border:solid 1px #333;
background:#555; }
#cssmenu_moo_menup ul
{ margin:0;
padding:0;
list-style:none; }
#cssmenu_moo_menup li
{ float:left;
margin:0;
margin-top:0;
padding-left:0;
list-style:none; }
#cssmenu_moo_menup li a
{ display:block;
text-decoration:none;
color:#eee;
padding:0 10px 0 10px;
font-size:11px;
line-height:20px; }
#cssmenu_moo_menup li a:hover
{ color:#303030; }
#cssmenu_moo_menup li.active a
{ color:#303030; }
#cssmenu_moo_menup ul ul,#cssmenu_moo_menup ul ul ul
{ display:none; }
You might try using display: table-cell instead of list-style: none on the top level lis, and then set display: table; width: 100% on the top level ul. This forces the the lis to be displayed using the table layout algorithm, which allows you to define how much space you want the whole thing to take up (in this case 100%).
I would use a table for that. It's one of the situations that I find a table is most appropriate also means that you don't have to worry about it later should your require adding more links in the future.
I'm not sure that's possible. I think you will need to set the width of each menu element specifically to ensure it spans the full width of its container, and make the appropriate adjustments to your CSS file once you add new elements.
Danny answer work well here are the main element:
#menu_conteneur ul{
display:table;
width: 100%;
}
#menu li{
display: table-cell;
}
#menu li a{
display: block;
}