Jump to content


Photo
- - - - -

nav classic menu background colors


Best Answer Danny , 14 January 2013 - 08:26 AM

Hi,

 

Use the following code, it should do the trick.

 

 
#site .sf-menu li.red a {
background: red;
}
#site .sf-menu li.adv a {
background: green;
}

 

 

 
Go to the full post


  • Please log in to reply
8 replies to this topic

#1 suerama

suerama

    Super Member

  • Members

  • 246 posts

Posted 13 January 2013 - 04:47 PM

My client would like me to create a nav bar where each menu item has a different background color.

 

On the wordpress Menu page, I've enabled the css class field to show for each menu item. Using this method I've been able to change the background colors of menu item background colors in the full-width navbar and in the Navbar, but it has no effect at all on the Classic Navbar. 

 

My client needs this done on the classic Navbar. Can someone please advise me how exactly to change the background color for each menu item in the Classic Navbar?  



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 January 2013 - 05:39 PM

Sue, go to Dashboard > Appearance > Menus.  On the top right, click "Screen Options". A panel will drop down.  You'll see a check box for CSS Classes. Check it. Then click Screen Options to close the panel.

 

Now, if you create or edit any menu item in the menu list, you'll see an empty field for CSS Class.  For each menu item, create a new, unique and individual class.  This would be like "mymenu1" and "mymenu2", etc.   Just do not use blank spaces between words. You can use Dashes or Underscores like my-menu or my_menu, however, the best method is simply without any punctuation.

 

Then, craft your CSS using that class like this 

.mymenu1 {background-color: #C00000;}

 

You can also create hover colors, active colors, font colors, etc.  For more on this, see

Please Login or Register to see this Hidden Content

 

This will enable you to make a menu that has a wide range of colors, not only for the parent level, but child level, as well as different color combinations when people are doing things with the menu.



#3 suerama

suerama

    Super Member

  • Members

  • 246 posts

Posted 13 January 2013 - 06:07 PM

Thanks for your quick response, Rob! 

 

I don't think you understood my message though. I had done exactly as you advised, originally. And it works beautifully on the Navbar and the Full-width Navbar. It even works on the footer simple nav (where I wish it wouldn't).

 

My problem is that my client's idea requires the use of the Classic Navbar. The css class in the Menu page item does not have any effect on the Classic Navbar in the most recent Pagelines framework version. Nothing changes there.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 January 2013 - 06:52 PM

Did you write a custom CSS element for the class created for the menu items?

 

Actually, this should work for Nav Classic moreso than for NavBar.

 

May we see the site?



#5 suerama

suerama

    Super Member

  • Members

  • 246 posts

Posted 13 January 2013 - 07:45 PM

Yes, I created a custom class: 

 

 

Please Login or Register to see this Hidden Content

 

As I wrote, this works fine with all menus except Classic Nav.

You can see that on the test page here:

Please Login or Register to see this Hidden Content

 

I checked to make sure I had added no over-riding code in the custom code area, and I see none there. 

 

I've tested it on my site, because I haven't begun work on my client's site yet. But I'll only be having this up temporarily as I don't like how it is affecting my real pages. I had hope to take it down today, but will wait until you advise. Thanks!



#6 Danny

Danny

    Is Awesome!

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

Posted 14 January 2013 - 08:26 AM   Best Answer

Hi,

 

Use the following code, it should do the trick.

 

Please Login or Register to see this Hidden Content

 

 

 


#7 suerama

suerama

    Super Member

  • Members

  • 246 posts

Posted 14 January 2013 - 03:24 PM

Perfect. Thanks so much.



#8 padihr

padihr

    Newbie

  • Members
  • 1 posts
  • Country: Country Flag

Posted 05 July 2013 - 01:37 PM

Hi, I'm using the Nav Classic as well but cannot change the Background color with the above comment. Can't I just put it into the custom css field?

Thank you,

Patrick



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 July 2013 - 01:54 PM

Patrick,

 

Danny's code should be copied and pasted to Dashboard > PageLines > Site Options > Custom Code.

 

You can also use Simple Lite CSS, a free plugin in our store.