Overlay header on top off slider

Support
#1

Hey Guys,

Long term X-theme user here, I’ve always loved the work you guys put out and the awesome support I’ve received, I’m hoping you guys can help me out once more.
I’m trying to overlay my header menu on top off my slider page at the bottom. http://gaetanosman.com/
I’ve been trying to sort my home page similar to your awesome Sales page https://theme.co/x/
Such that the menu overlays the slider page at the bottom, however currently my header is located below the masthead completely without it being visible for anyone that lands on my page.

Hope you guys can help me out

#2

Also, This is something unrelated to my inital question but could you guys fill me in on what the difference is between the X theme and the X theme pro?
If the X-theme pro offers more flexability concerning header and footer customization among many other things I am definitely considering the upgrade.

#3

Hey @genesis77,

Though it’s possible to overlay your header by using custom CSS, it’s not recommended for your setup as you can see the result in this screencast: https://youtu.be/NYmwRUtfS1g. In case that’s what you’re after though, here’s the code from my demonstration. Please just note that the code is for demonstration purposes only. We do not give custom code as part of our support service.

/* apply to your home page only */
.home .masthead {
    margin-top: -90px;
}

Our sales page design is not an overlay. The slider’s height is reduced taking into account the height of the masthead. That was made possible by Slider Revolution’s Fullscreen Increase/Decrease Fullscreen Height option. Just insert the X header’s class which is .masthead and it will automatically reduce the slider’s height.

That will work for Pro header also. And regarding the difference between X and Pro, the major difference is the ability to create a custom header and footer and assign it globally or per page, post or custom post type.

If you need the demos in https://theme.co/x/demos/ though, that is only available in X. Pro has a different templating system which is the Design Cloud. For more details, please see https://theme.co/designcloud/

Hope that helps.

#4

Wow, I always knew you guys give the best support but to actually give me a video with detailed instructions is unheard off! thanks heaps Christian
Just one last thing, where do I copy the code .masthead? you’re right, even though appreciated, what you demonstrated in the video wasn’t really what I was going after. it’s more like what you stated in your second comment.

Cheers!

#5

Nevermind, found it!

if there are any demos that use the X pro theme, send them please! I’m highly considering the upgrade
Cheers Christian!

#6

Thank you for your kind words and I’m glad it helped.

I forgot to add a link to the Fullscreen Options of Slider Revolution but glad you’ve found it. For future readers, here’s the link: https://www.themepunch.com/revslider-doc/slider-setup/#advanced-layout

Regarding the demos, if you’re looking for websites created with Pro, regretfully, we currently don’t have a specific list but a mix of X and Pro sites built and shared by users can be found in the Showcase Thread at https://theme.co/apex/forum/t/showcase-thread-official/284/144

Cheers!

#7

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