Transparent Nav Bar in App Demo

Support
#1

How does one get a hero image to be behind a transparent nav bar in the Themeco’s “App” demo … specifically on the http://demo.theme.co/app/about/ page … the homepage seems to be Rev Slider, but on this inner page it is NOT a slider. So how does one accomplish this? Is that hero image within the page content … eg. a background image of 1st section? Or where? And why does the nav bar then go un-transparent when you shrink down the browser window to tablet and below? Can’t it stay transparent?
Thanks !

#2

It seems that some custom CSS is in work there:

.x-navbar, .x-navbar .sub-menu {
    background-color: hsla(210,29%,24%,0) !important;
}

HSL stands for hue, saturation, and lightness. a at the end mean alpha channel.
See that 0 at the end ? His valor is 0 that’s mean it’s completely transparent.It can be any valor between 0 … 1 (0.05 , 0.75, … ).

Some margin-top: 0; need to be used on .x-main class to “up” the content, to go to point 0 at the upper end, and “go” in the back of the header (menu). Just inspect the code from demo and see what they did there :slight_smile:

They did it on
.hentry:first-child {
margin-top: 0;
}
That’s the first seen content material on that specific page.

1 Like
#3

Hi there,

You have to add either of this CSS too

.masthead, .x-masthead {
    position: absolute;
    width: 100%;
}

or

.masthead, .x-masthead {
height:0;
}

So it will overlay above the slider or the first section.

Thanks!

1 Like