6 replies to this topic

[suerama]

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?  

[Rob]

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.

[suerama]

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.

[Rob]

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?

[suerama]

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!

[Danny]

Hi,

 

Use the following code, it should do the trick.

 

Please Login or Register to see this Hidden Content

 

 

 

[suerama]

Perfect. Thanks so much.