[chwbauerParticipant]

I am trying to figure out how to recreate something resembling this page https://www.planet.com/careers/. Notice that there is a menu at the top which slides away as you scroll down, revealing a new menu which then sticks to the top. Is that something that can be done with X?

[RadModerator]

Hi there,

Thanks for writing in.

You mean the fixed menu? You can do that at Admin > Appearance > Customizer > Header > Navbar Position > Fixed Top. Additional step when you’re using fullscreen slider just as your given url, is by adding .masthead on Offset Containers input field under your Slider Settings.

Hope this helps.

[chwbauerParticipant]

The question was more whether it is possible to have two menus, one which appears above the slider, and a second one which appears as you slide down and then sticks to the top.

[ChristopherModerator]

Hey there,

X support one primary navigation, But the is another solution, You can add first menu in top bar by adding HTML,
e.g :
<a href="#">Home</a> | <a href="#">Blog</a>
Add a slider above masthead and fixed menu. If you decide to do this let us know so we can provide you with customization which moves topbar above slider.

Thanks.

[chwbauerParticipant]

Thanks for the response. This is pretty much what I was looking for! The only thing I can’t figure out is how to get rid of the social icons in the topbar.

Can you let me know how to move the top menu above the slider?

Thanks!

[ChristopherModerator]

Hi there,

Please add the following CSS under Customize -> Custom -> CSS :

.x-topbar .x-social-global{
display:none;
}

You can set your slider below masthead.

Hope it helps.

[chwbauerParticipant]

Thanks for the custom css to get rid of the social icons.

If I set the slider below the masthead, both menus are above the slider. What I would like is for the topbar to be above the slider, while the regular menu is below the slider.

Can this be done?

[RadModerator]

Hi there,

That’s possible. I could only guide you what to do, but further issues it may cause is something we can’t support.

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

1. Copy this file /x/framework/views/{YOUR STACK}/wp-header.php to your child theme (eg. /x-child-{YOUR STACK}/framework/views/{YOUR STACK}/wp-header.php )

2. Edit your child theme’s wp-header.php

3. Move this code <?php x_get_view( 'global', '_topbar' ); ?> above this code <?php x_get_view( 'global', '_slider-above' ); ?>

4. Save and upload.

5. Set your slider below masthead, then set your slider’s Offset Containers to .masthead,.x-topbar

Cheers!

[GoFurnItParticipant]

Dear Themeco Team, I have a similar question strongly related to this one here: I want to have exactly what the OP described in his initial post opening. That website he refers to which has a menu appearing after the first section and then sticks with the rest of the One-Page website. I am not getting that done. http://www.gofurnit.com hope you can help!

[ZeshanMember]

Hi GoFurnit,

Thanks for writing in!

It is not possible to have two menus out of the box, but as suggested above, you can insert your links inside the Topbar. Then you can follow our last reply post to move the topbar before the “Slider Above”.

Let us know how it goes.

Thanks!

[GoFurnItParticipant]

Hi, me again once more!

Thanks first off for your awesome support! Never had a service that great and fast!

Soo: You almost got my request right. What I want is actually like this https://www.planet.com/careers/ even without the “Top Bar”

What I do care about is that the Slider is Above the X-Navbar! Means that when I open the website, first thing I see is a slider animation and when I scroll down, the menu navigation (navbar) appears and then sticks to the top the more you scroll down. When you go up again, it should reverse!

Is that step above the same method to achieve this?

[ChristianModerator]

In that case, you can follow this tutorial https://community.theme.co//kb/sliders/.

Thanks.

[LeannaParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hi Leana,

Thanks for updating this thread! To place your logo and navbar above your slider, you can disable your current settings and please use the “slider settings: below masthead” instead.

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

[LeannaParticipant]

Duu, I had it backwards. Fixed now.

[Author]

Posts