Nav bar issue with pro

Support
#1

Hi There

I just upgraded to pro on my site www.obefrance.com and see that my nav bar links are blending with the background as they are the same colour. The background was black before I upgraded.

I’ve not had a chance to learn the ropes on this yet, but would like some guidance on how to turn the existing nav bar transparent?

Thanks

Todd

#2

Hi Todd,

You can change the color of navbar menu items under: Theme Options > Header > LINKS – TEXT > NAVBAR LINKS and NAVBAR LINKS HOVER

To change the original header to transparent, please add this custom CSS under Theme Options > CSS:

.home .masthead {
    position: absolute;
    width: 100%;
}
.home .x-navbar {
    background: #6361619a;
}

Hope it helps :slight_smile:

#3

Very helpful, thank you.

Just two more things…

  1. if you go to the homepage and hover over the “pages” nav bar link, how can I change the background colour to black as currenty can’t see the drop down links?

  2. how can I make the nav bar completely transparent and then convert to a solid colour on scroll down?

Thank you so much!!

#4

Hello @ToddRoutt,

Thanks for updating in!

1.) When I visited your site, I am seeing this:

Which background you want to change?

2.) To make the navbar transparent and with a solid color when you scroll down, please check this thread: https://theme.co/apex/forum/t/menu-background-change-color-on-scroll-broken-since-last-update/36371

Hope this helps.

#5

That works really well… the link was a great share. Just one more thing… I only wanted the transparent nav bar on the homepage not the other pages. How can I make the transparent nav bar exclusive to the homepage please?

Thanks from a very happy customer :slight_smile:
Todd

#6

Hi There,

Please find this custom CSS:

.x-navbar {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    position: fixed;
    width: 100%;
}

.x-navbar-solid {
    background-color: black;
    transition: all 0.3s ease 0s;
}

And change to this:

.home .x-navbar {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    position: fixed;
    width: 100%;
}

.home .x-navbar-solid {
    background-color: black;
    transition: all 0.3s ease 0s;
}

Hope it helps :slight_smile:

#7

The dropdown menu still seems white from my screen… could you confirm as it could be a caching thing, but doubt it as I checked on a second computer.

Thanks
Todd

#8

Also, the nav bar is now solid on other pages, but showing up as white, not black?

#9

Hello @ToddRoutt,

Sorry for the confusion. Please have your code updated and use this:

.home .x-navbar {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    position: fixed;
    width: 100%;
}

body:not(.home) .x-navbar,
.x-navbar-solid {
    background-color: black;
    transition: all 0.3s ease 0s;
}

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

#10

That worked for the nav bar on all pages but homepage, which is what we want, so thanks. But how do I change the background colour from white to black on the “pages” link dropdown on the nav bar?

#11

Hello @ToddRoutt,

To change the background color of the submenu, please make use of this code:

.desktop .sub-menu {
    background-color: black;
}

Please let us know how it goes.

#12

Brilliant, you support folk are awesome, thank you for ALL your help :slight_smile:

#13

You’re welcome Todd!
We’re glad we were able to help you out.

#14

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