Archived

This topic is now archived and is closed to further replies.

  • 0

nav classic menu background colors

Question

Posted · Report post

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?  

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

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

 

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

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 http://www.w3schools.com/css/

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, I created a custom class: 

 

 

.red {background-color:red;}

 

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

You can see that on the test page here:

http://ramacommunications.net/test-rainbow-nav/

 

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!

Share this post


Link to post
Share on other sites

Posted · Report post

Perfect. Thanks so much.

Share this post


Link to post
Share on other sites