9 replies to this topic

[cemyk]

Hi,
I'm trying to edit a menu tab on my main navigation to highlight it from the rest. That is, it will constantly have a background colour.
http://redmudmedia.com
Using firefox, I have inspected the element, giving me the following;

 <li? id="menu-item-1144"? class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1144">

What is the correct way of changing the background colour on this menu tab only? I can't seem to get the identifier quite right.

So far I have tried the following variations added to my custom css;

 
	#nav ul li.menu-item-1144 {background:#CC0000;}
	**********************************
	.main_nav ul li.menu-item-1144 {background-color: #CC0000;}
	**********************************
	#menu-item-1144
	ul.main-nav li a {background-color:#CC0000;}
	**********************************

I'm sure I'll kick myself, but thanks in advance!

[Kate]

No worries... in the first two you're putting it as a class, instead of an ID. Also, you're assigning the background to the list item, when it should be applied to the anchor tag. If you use the second one like this:

 .main_nav ul li#menu-item-1144 a{background-color: #CC0000;}

it will work.

[cemyk]

Thank you! And finally, I have shifted this tab away from the others by applying a left-hand margin. This is currently changing colour on hover, how would I hide this colour change on this tab margin alone? Alternatively is there a code that can be applied to this tab to align it to the right hand side of the site? Perhaps avoiding the need for this margin.

[catrina]

Add this code to get rid of that grey background on hover:

 .main_nav ul li#menu-item-1144 a:hover {backgroud-color: none;}

As for aligning the tab to right hand side, you can try this:

 .main_nav ul li#menu-item-1144 {float: right;}

[cemyk]

Thanks Catrina, The right align works perfectly. But the hover remains. I copied your code straight into the custom CSS area. Checked in both Safari & Firefox.

[kastelic]

I think she meant:

 #menu-item-1144:hover { background-color: transparent }

[gayatriom]

hi. For some reason, the above isn't working for me. 

this is what I have:

 

li#menu-item-114{float:right;font-size:18px;color: #225e20;

font-weight:bolder;}

li#menu-item-114 a {float:right}

.navbar .navline li#menu-item-114 a {float: right;}

.navbar .navline li#menu-item-114  {float: right !important;}

 

I just want one menu item on the navbar to float right. 

I don't want to use margin as it will mess up in responsive mode. 

[catrina]

The fixes above were from 2 years ago, so they're most likely outdated. Please post your issue in a new topic in the appropriate category.

[gayatriom]

thanks! 

[catrina]

No problem.