Docs

[Fedde]

Hey staff,

I’m looking to make a navbar just like this: http://www.tonyrobbins.com

My URL: http://www.feddewestera.nl

i’m using this css:

.x-navbar .x-nav > li > a:hover, .masthead-inline .x-navbar .sub-menu, .masthead-inline .x-navbar .sub-menu .sub-menu {
background-color: black;
color: white;
}

But as you can see i’m not getting the planned results.

Best Regards

Fedde

[Joao]

Hi Fedde,

Please also add :

.x-navbar .desktop .x-nav > li > a > span:hover {
    color: white;
}

Hope it helps

Joao

[Fedde]

Thanks for that! The white is showing which is great, but its only white when hovering over the text. And the problem im struggling with aswell is that there is still a white space (or line) above (between the top bar and menu bar) and below the menu bar.
Is there any CSS to fix that?

Best Regards,
Fedde

[Lely]

Hi Fedde,

You’re welcome!
Please update previous suggested CSS to this:

.x-navbar .desktop .x-nav > li > a > span:hover,
.x-navbar .desktop .x-nav > li > a:hover > span {
    color: white;
}

Also add this:

.x-topbar {
    border-bottom: 0;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 79px;
}

Hope this helps.

[Fedde]

Thanks! It worked for the whitespace above and the hover text. The only thing that is still there is the white space below the menu bar. I tried lowering the 79px height but that didn’t work.

Thanks in advance!

Fedde

[Rue Nel]

Hello There,

Thanks for updating in! To remove the white space below the menu bar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-navbar {
    border: none;
    margin-bottom: 0;
}

We would loved to know if this has work for you. Thank you.

[Fedde]

Thank you guys so much! That worked perfectly!

Fedde

[Rue Nel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Fedde]

Hey,

Thought it would be better to reply than to create a new topic. I can’t figure out how to add the effect we created for the hovering to apply on the active menu link. I’ve tried a couple a:active css codes but none of them are working. The active effect was once removed because i did not like the standard line above the menu link. The CSS code used for that:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none !important;
}

Do you guys have any suggestions for a CSS code that could do this?
Url: http://www.feddewestera.nl

Thanks a bunch in advance!

Fedde

[Christian]

Please add the code below in your Appearance > Customize > Custom > Global CSS

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    background-color: black;
    color: white !important;
}

Thanks.

[Fedde]

Perfect! Thanks alot!

[Thai]

If you need anything else please let us know.

[Author]

Posts