Jump to content


Photo
- - - - -

How to Highlight BrandNav Menu Item

brandnav menu

Best Answer Danny , 23 February 2014 - 03:09 PM

Try this:

 

#menu-item-31 a { color: #FFFFFF; }
#menu-item-31:hover { background-color: #FBC000; }
 
If you're a complete newbie, I would highly recommend Code School, sign up its free and do the dev tools course/interactive tutorial its awesome and will have a code ninja in no time. You should probably sign up for the premium service and do the Web design courses, it will be beneficial.
Go to the full post


  • Please log in to reply
5 replies to this topic

#1 briana

briana

    Newbie

  • Members

  • 5 posts

Posted 23 February 2014 - 02:16 PM

I want to highlight the DONATE menu item in my navigation (www.stilleasierthanchemo.com) by default without the user having to hover over the link. I've attached an example of what I'd like it to look like (run4massey.org). How do I change the background color of the DONATE link without changing the background color of the entire BrandNav menu list?

 

 

Attached Files



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16289 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 02:39 PM

Hi,

 

You will want to use Custom CSS, something like this:

 

#menu-item-31 {
background-color: #FBC000;
}
 
In the CSS above, I have used Google Chromes dev tools to inspect the donates menu item which has a unique ID, from that I can add individual styling. You will probably want to also change the hover state and link color. For that, you will need to add more custom CSS by targeting the menu again and using the a tag in your custom CSS to style the link color and also use the :hover pseudo class for the hover state.


#3 briana

briana

    Newbie

  • Members

  • 5 posts

Posted 23 February 2014 - 03:01 PM

Thanks!

 

The CSS you provided worked perfectly. I'm using the Chrom dev tool but am still having trouble changing the link color from #36bcab to #fff. Also, I don't know how to remove the hover effect.

 

(Sorry, total newbie here...)



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16289 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 03:09 PM   Best Answer

Try this:

 

#menu-item-31 a { color: #FFFFFF; }
#menu-item-31:hover { background-color: #FBC000; }
 
If you're a complete newbie, I would highly recommend Code School, sign up its free and do the dev tools course/interactive tutorial its awesome and will have a code ninja in no time. You should probably sign up for the premium service and do the Web design courses, it will be beneficial.


#5 briana

briana

    Newbie

  • Members

  • 5 posts

Posted 23 February 2014 - 06:43 PM

Thank you! I'll definitely look into Code School -- I want to learn more. Thanks again for your help!



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 23 February 2014 - 08:35 PM

i have marked this as resolved 







Also tagged with one or more of these keywords: brandnav, menu