Jump to content


Photo

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


  • Please log in to reply
9 replies to this topic

#1 cemyk

cemyk

    Member

  • Members
  • PipPip
  • 11 posts

Posted 14 December 2011 - 10:03 AM

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!

#2 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 14 December 2011 - 03:43 PM

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.

#3 cemyk

cemyk

    Member

  • Members
  • PipPip
  • 11 posts

Posted 15 December 2011 - 08:37 AM

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.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 December 2011 - 07:30 PM

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;}


#5 cemyk

cemyk

    Member

  • Members
  • PipPip
  • 11 posts

Posted 22 December 2011 - 11:29 AM

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.

#6 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 22 December 2011 - 10:27 PM

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


#7 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 07 March 2013 - 03:51 PM

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. 


#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 March 2013 - 04:44 PM

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.



#9 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 07 March 2013 - 04:52 PM

thanks! 



#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 March 2013 - 07:08 PM

No problem.