• 0
Sign in to follow this  
Followers 0

How do I edit a single menu item on the main Nav

Question

Posted · Report post

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;



	
	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!

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

No worries... in the first two you're putting it as a [i]class[/i], instead of an [i]ID[/i]. 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: [code].main_nav ul li#menu-item-1144 a{background-color: #CC0000;}[/code] it will work.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Add this code to get rid of that grey background on hover: [code].main_nav ul li#menu-item-1144 a:hover {backgroud-color: none;}[/code] As for aligning the tab to right hand side, you can try this: [code].main_nav ul li#menu-item-1144 {float: right;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think she meant: [code]#menu-item-1144:hover { background-color: transparent }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thanks! 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0