Nav Bar Colors

Support
#1

I’n mot able to figure out how to change the nav bar colors.

My page: http://mitw.staging.wpengine.com

Looks like this:

However I want to make it look like this:
http://demo.theme.co/gym/
with RED instead of Orange:

Thanks in advance!

#2

Hi There,

You can turn off Uber Menu Plugin and go to Theme Options > Header to adjust your navbar colors.

To Change the background color to white, you can add the following code to Theme Options CSS

.x-navbar {
    background: white;
}

Hope it helps

#3

How about the Orange Line that goes over the Grey Line? I want to make that a red line that goes over the white bar… makes sense?

#4

Hello there,

That does make sense yeah :slight_smile:

To achieve this, please use the following custom CSS (you may apply this in Customize --> Custom --> CSS).

body:not(.rtl) .ubermenu-skin-grey-white.ubermenu-horizontal .ubermenu-item-level-0:first-child > .ubermenu-target {
    box-shadow: 0 2px 0 0 red;
}

I hope this helps.

#5

Thanks for the reply! It’s only working on the Home page. What I’m looking for is for the menu to work like this one:
http://demo.theme.co/gym/

With the following colors:

Gym Menu White BG -> Black BK on mine
Gym Menu Orange Text and Line -> Red on mine
Gym Menu Grey text- > White Text on mine

Does that make sense? Thanks in advance for your help :slight_smile:

#6

Hello,

Thank you for keeping us updated :slight_smile:

May you remove the original CSS code I provided you with and may you try this code instead please?

.ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-parent > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target{
  box-shadow: 0 2px 0 0 red
}

.ubermenu-target:hover{
  box-shadow: 0 2px 0 0 red
}

If this doesn’t work, if you could please add your WordPress admin login credtinals being your admin username, password and login URL to a secure note on this ticket that would be greatly appreciated :slight_smile:

Thank you

#7

It’s almost there! The only one missing the red line is when we are at “home” and hover over “home” the other’s work great. Do you still need my credentials? Thanks in advance!

#8

Hi there,

What you’re currently getting? The home is being highlighted as the current item and when hovered too, at least on my test. Would you mind providing a screenshot of what you’re getting?

Thanks!

#9

Hi Rad,

Thanks for your help!
As you can see the line under “Home” is missing when we roll over or when we are on the page:

#10

Hi again,

Please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

body .ubermenu-current-menu-item a {
    box-shadow: 0 2px 0 0 #da2128 !important;
}
.ubermenu-target:hover {
    box-shadow: 0 2px 0 0 #da2128 !important;
}

Let us know how this goes!

#11

Works great! Thank you! :slight_smile:

#12

Glad we could help.

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.