Transparent menu over a hero image

Support
#1

Hi guys,

Was searching around in the current forum and the old one, but couldn’t find how to make a menu similar to this one: http://redrokk.com/ Found this topic, but it is not quite the same effect: https://xthemetips.com/transparent-fixed-header/129/

Your help would be greatly appreciated!

#2

Hello There,

Thanks for writing in! Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

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

body.home .x-navbar {
    background-color: transparent !important;
    border: none;
}

.home .x-navbar .x-nav-wrap .x-nav > li > a {
    color: #fff;
}

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

1 Like
#3

Yes, that is exactly what I was looking for! Thank you so much!

One more thing - how can we hide/get rid of the vertical separators between the menus?

#4

Hi There,

Please add the following CSS

.x-navbar .desktop .x-nav>li:first-child>a , .home .x-navbar .x-nav-wrap .x-nav > li > a {

border: 0px;
}

Hope it helps

1 Like
#5

Works great, thank you!

#6

Hi @wcshutter,

Happy to hear that.

Feel free to ask us again.

Thanks. :slight_smile: