Docs

[Flightwave]

Hi there,
URL and login credentials to follow.
I turned on Navbar transparency – but it doesn’t seem to be working.
This may be because I added some custom CSS that was given to me by your help team in the General Custom CSS area, but because I am not a coder – I’m not sure. Could someone look at what we have and tell me how we might be able to adjust the transparency of our top nav bar?

thanks!

[Flightwave]

This reply has been marked as private.

[Joao]

Hi There,

Please remove the following code from Appereance Customizer Custom CSS

.x-navbar,.x-colophon {
    background-color: #252525;
}

And add

.x-colophon {
    background-color: #252525;
}
.x-navbar{
border-bottom: 0;
box-shadow: none;
}

You can change your navbar links at Appereance Customizer Header

Hope it helps

Joao

[Flightwave]

Hi there – thanks for the quick reply!
I tried that – and it makes the navbar completely transparent.
What would I do if I only want 10 transparency (opacity) – so that it’s mostly the same color it was, but you can slightly see things through it?
Thanks,

[Joao]

Hi There,

Please update

.x-navbar{
border-bottom: 0;
box-shadow: none;
}

to

.x-navbar{
border-bottom: 0;
box-shadow: none;
background: rgba(0,0,0,0.7);
}

Hope it helps

Joao

[Flightwave]

thanks so much!!

[Flightwave]

oops – the only problem is that now the sub-menu is all white.
Before it was the same color as the header and nav bar.
How can I have the submenu appear as the same color / transparency as the nav bar?

[Flightwave]

nevermind – i figured it out. had an extra bracket in there.
Cheers!

[Flightwave]

however – can I give the submenu the same transparency as the nav bar?

[Flightwave]

I actually figured this out also – but now when the submenu overlays the navbar – the transparency causes a dark spot in the overlay area. Is there a way to have the submenu appear lower so it doesn’t overlay the navbar?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar .desktop .x-nav > li ul {
    top: 58px;
}

Hope that helps.

[Flightwave]

Brilliant!

One more question: I don’t suppose there’s a way to make the submenu appear centered below the main menu item? Currently it’s a little to the left. This is NOT a big deal to me – so if its difficult – no problem. But if it’s easy – it might look nicer.

thanks!

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

.masthead-inline .x-navbar .desktop .sub-menu {
    left: -21% !important;
}

Let us know how this goes!

[Flightwave]

Amazing – perfect – thanks!!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts