Full Screen slider

how can I make my slider go full screen with transparent header so I can see the menu and logo

like this

Hello @rotation,

Thanks for writing in!

You must edit your slider and in the slider settings, make sure that you enable the “Fullscreen” option as the slider layout.

And then you can apply this custom css to make the navbar stay on top of the slider. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.masthead .x-navbar {
  position: fixed;
  top: 0;
width: 100%;
  z-index: 166666;

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

The slider still is far away from the top of the page with that code and full with setting set. how can i get it just under the social media icons?

also how about not fixed header but just under the social media icons

In mobile the slider is so far from the bottom of the logo too much white space how can I fix this?


Hey @rotation,

To better assist you with your issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.


just put the link above in note , thanks

Hello @rotation,

Your slider has been added within the page content. You cannot accomplish what you have in mind with that set up. Please remove the slider and your very first section in your homepage. If you want a slider with the navbar on top of it, please set up and assign the slider in the Slider Settings Below Masthead setting. To know more how you can integrate the slide in your site, please check out this knowledge base article:

Hope this helps.

did you see the site about in note that i like ?

Hey @rotation,

Yes I have seen that secure note and I have checked your site already. Place your slider below the masthead. You may need to review my previous reply to fully accomplish what you have in mind.


how about a not fixed header - i see the css code you replied with it worked i tested it but what if i dont want the header to be fixed ?

Hello @rotation,

If you do not want a fixed header, please remove the custom css. Your navbar should be position on top of your header and will scroll along with the page. To make sure that the navbar is static, please go to X > Theme Options > Header > Navbar and set the “Navbar Position” to Static Top.

Hope this helps.

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