Transparent Menu over Hero Image

Support
#1

Hi guys,

Been working on a transparent menu over a hero image and had some difficulties. At the end the result was achieved, but would like to discuss that here since it is a fairly common thing and there isn’t a lot of info on the topic in the current forum.

This is what I have for css code:

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 0;
}
body .x-navbar {
background-color: transparent;
border: none;
}

and since was only looking to make specific pages with a transparent menu I ended up applying the first chunk of code to those pages css editor instead of the global css editor:

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 0;
}

Is this the best way to achieve a transparent menu in general and what would be the best way to achieve a transparent menu only to specific pages as well?

link: https://kryptonitecreative.com

Thank you!
p.s. how do you paste code in the thread, cannot find a code snippet tool and currently using the blockquote…

#2

Hi There,

Thank you for writing in, that is actually one way of doing it.

You can actually put this on the Theme Options > CSS

You just need to replace the .x-navbar-fixed-top-active with a custom CLASS, and then add that class to your selected pages.

screenshot

Wrapped your code with 3 back-ticks and it will be formatted beautifully.

screenshot

Thanks,

1 Like
#3

Thank you for the tips, it’s very useful!

#4

You’re welcome.