Header as part of Full Screen Section

Support
#1

Hello again,

Another question. I want to have a full screen background image that goes behind the transparent header with menu. Right now, I have a full screen section, but the header pushes it down so it doesn’t look right.

Currently:

Trying to get:

Please let me know if I can do this.

Thank you!

#2

Hi there!

Thanks for writing in!

Unfortunately X doesn’t provide that facility! how ever you can do this with custom css.
We have done one expanded demo http://demo.theme.co/app/ with similar layout. You can use this demo content and CSS to achieve this. Just import the demo data and change the content with your original content.

I would like to recommend you to use our another Product called Pro, it has lot of feature in header and footer builder to make any kind of design.

Hope this helps!

Thanks

#3

Ok, I’ll give it a shot. Thank you!

#4

You’re welcome, Happy Holidays :slight_smile:

Cheers!

#5

Hi Friech,

I tried this and it works well for desktop, but not for mobile. Is there a way to get the same effect in Mobile?
If not, is there a way to make the section end at the bottom of the screen? Right now it goes beyond because it’s being pushed by the header/nav bar.

Thank you!

#6

Hello There,

Thanks for updating in! To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media (max-width: 979px) {
  .home .masthead {
    position: absolute;
    width: 100%;
  }

  .home .el1.x-section {
      padding-top: 0;
  }
}

Please let us know how it goes.

#7

That’s perfect! Thank you so much, RueNel!

#8

You’re welcome!
We’re glad we were able to help you out.

1 Like
#9

Hi RueNel,

After you helped me resolve the previous header issues, it seems all the other pages (except the home page) have a black header. Can you please help make the header transparent for all pages?

Also, I can’t seem to change the main background for the entire website to black. I’ve already turned the settings to black from what I know.

Thank you as always!

#10

Hello There,

Thanks for writing in!

1.) Please remove the custom css

@media (max-width: 979px) {
  .masthead {
    position: relative;
    width: auto;
  }
}

2.) If you will be having a black background, you can change the navbar background color to transparent. Please go to X > Launch > Options > Renew.

3.) On this page, https://www.studioennoire.com/gallery/, please edit it in Cornerstone and change the background color of the section to blank.

Hope this helps.

#11

Awesome. You’re the best.

Thanks and happy new year, RueNel!

#12

You’re welcome.
Happy New Year too!

#13

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