Full height header image

Support
#1

Hi,

Im trying to find a way to have the top section/image extend full height to the top of the screen with the menu floating over the image.

Like https://www.airbnb.co.uk/

Ive tried to make the navbar transparent but this doesnt seem to have any affect. Is there some specific CSS I need to add to each page or is there a simple way of doing this in Cornerstone?

Thanks.

#2

HI there,

One option would be to set the height of the section to 100vh. To do this, click on the section’s customize setting then add this to the Element CSS:

$el {
  height: 100vh;
}

Another option would be to create a Revolution Slider then set the Slider Setting to Fullscreen.

Then once the slider is created, go to your page setting then set the Slider Settings: Above/Below Masthead to the slider you have created.

Hope this helps.

#3

Thanks very much for this Jade. Im not looking it to take the entire size of the viewport, i just want the top of the image to extend up to the top of the page with the menu over the image. Does this still work?

#4

Hi Will,

Oh I see. Thanks for clarifying. In that case, please add this code to the Global CSS:

.masthead {
    position: absolute;
    width: 100%;
}

.x-navbar {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

Here are some related links for further reading:

Hope this helps.

#5

Thanks - thats perfect

#6

You are most welcome. :slight_smile:

#7

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