X demo slider + menu

Hello, I have bought the X theme and also the pro and I am currently using the PRO on my website and I was wondering if I can recreate the slider + menu exactly like the demo in here: https://i.imgur.com/52ob8Sp.jpg

where the slider always fills the screen of the browser with the menu at the bottom appearing and when scrolling up the menu moves to the top. is there a way to import such slider + menu layout? if so, can someone guide me. thanks!

Hey Leo,

Welcome to our Support Forum and thanks for writing in.

With Pro, that is possible. I’d first like to clarify though that our sales page header does not use a slider. You can use a slider though. It’s just that you’d need to use a different method which I’ll detail below.

Using Slider Revolution

If you’re going to use Slider Revolution, you’d need to use a Full Screen Slider Layout

Then, you need to offset the height of the header. You can do that by inserting the class of the header which is x-masthead in the Decrease Module Height > by Container field of the Full Screen Layout setting.

image

If you noticed, there’s a dot before the x-masthead because it’s a class. If you’re targeting an ID, a # hash should be used.

For more details about Slider Revolution usage, please go through the documentation here: https://www.themepunch.com/support-center/

Next, you need to add the slider on the page using the Slider Above Masthead Page Setting.

image

Using a 2 bar setup where the first bar will cover most of the screen

In this setup, set the height of the first bar to 80vh or depending on the ratio you need. What’s important is you use the VH unit like in the screenshot below.

The 2nd bar which will contain the menu should be 20vh.

------------------------------------------------------------

If you’re interested to replicate the design of the layout and design of the menu, you need to learn how to use the Flex Options available in the elements. For more details, please see https://theme.co/docs/use-flex-layout.

I’d also recommend checking the rest of the tutorials available in our Themeco Docs and also our Youtube Channel.

Hope that helps.

1 Like

Thank you for your help!

do you happen to know how i can fix this issue where content and headers do not get spaced up by itself? https://i.imgur.com/QYP5rWD.png

Hello Leo,

Are you using a custom header? Please set the height of your bar to auto or at least a decent amount that reflects the actual height of the bar.

W6yg7CEYSsWAv6N1aVjqag

If nothing is helping, provide us access to your site so that we can check your settings since your site is under construction mode. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.

secure note made up there. hope you can make the website/theme look great!

Hello Leo,

Please set the Bar’s (used for pages and posts) Initial Position to Relative.

Hope this helps.

It did help! thank you!

  1. The search results page
  2. Category listing page,
  3. 404 Page
  4. Some Custom Post pages
    are connected with default template, so we want to know the options how to set our header and footer to those pages and how to change this default template to ours one?
    Because the custom headers, applied only to the pages, posts, and custom posts also, but some search results page like this won’t apply.

Hello Leo,

If you do not set a Global Header, the theme’s default header will be shown in the search results page, archives, 404 pages, etc. We highly suggest that since you have created a custom header, make your custom header the global header which you can do that in Pro > Headers.

To learn more on how you can assign the header, please check this out:

so I have a landing page header and another header for when you are in store / product /checkout / cart pages and I have a header for everything else. how can i go on to set that up?

Hello Leo,

Please be advised that you can also assign a header to the shop page, all products and other WooCommerce pages.

Regards.

setting it up for shop page is okay but how do i make it for all products pages too? (not for all website pages)

Hello Leo,

You can select the WooCommerce pages in the right pane when you are assigning the header.

  • eXM6B4lfR-_KCX2DCRUdGw

Hope this helps.

so from what i understand. if i set a header global it will appear on any page but if i have ones set for store the global one will not override those

Hey Leo,

This is correct, Global header will show on every page unless a page is assigned a different header. Global header will not override those settings which also means assigning a header to an individual page will override the global header.

Hope this helps!


  1. Very simple, we have created the 3 custom headers
  • All Inner pages Header
  • All Store Menu
  • Landing Menu
    As you suggested, i activated “All inner pages Header” as GLOBAL HEADER.
  • After this, that store menu and landing menu already selected with specific pages, but its not reflects,
  • only shows the Global Header in all pages, but we need that store menu and Landing menu should be reflects on specific pages as selected there, the sample screenshot attached.

Looking forward your solutions.

In that case, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

done. and please let me know how you resolve it to avoid the issue in future

Hello Leo,

Can you please un-assign all your custom headers. Assign your global header first and then reassign the other headers to their respective pages. If the issue still exist, you can test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

We would love to know if this has worked for you. Thank you.

Hello!, tried doing that but it did not work for some reason…

also, how can I make the custom footer stick to the bottom of every page?