Jump to content
suerama

nav classic menu background colors

Recommended Posts

suerama+    2
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?  

Share this post


Link to post
Share on other sites
Rob    547
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 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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
suerama+    2
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.

Share this post


Link to post
Share on other sites
Rob    547
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?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
suerama+    2
suerama

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
Danny    1,327
Danny

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

 

 

 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
padihr    0
padihr

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×