Multiple Menus – Change Current Page Text Color For Each

[GR8FL]

Having a tough time making the menu bar work for the phone and the desktop.

Is it possible to specify if .is-mobile to use a different menu bar background, divider colors, etc? If I  go ahead and use the secondary menu bar for the desktop, I still run into the issue of the color for the current menu item which seems to be global for all menu bars. How then can I specify a color for current page for a particular menu?

Site: http://demo.littledropup.com/

[scrambler]

Everything is possible with Custom CSS. that being said you have three Menu styles available, primary, secondary and extra. SO given you are using an extra menu shortcode for the desktop menu, you can use a different style for the extra menu than for the primary menu bar.

Either use the secondary style or the extra style.

That will allow you completely different styling for the desktop menu and the mobile one. The only thing left will be to change the Current page styling.

Once you have both menu styled with their own style, tell which one you want to change and how and we can give you the CSS

[GR8FL]

I have it setup now.

Primary = mobile
Secondary = desktop

[scrambler]

If you want to style the current page of just the desktop extra menu at the top right use the rule

.wvrx-extra-menu .current_page_item > a, .wvrx-extra-menu .current-menu-item > a, .wvrx-extra-menu .current-cat > a {background-color:red !important;}

[GR8FL]

perfect!!

[Author]

Posts