Make header sticky nav different design compared to initial nav

[Lobsterass]

Hi!

How do I create a different menu design for the sticky nav, that is now triggered at .x-main?

The initial main nav should have a transparent background + languages on the left side.

Sticky nav should have grey background + logo instead of languages on the left side.

http://dev.svartklubben.com/

<3

[jade]

Hey @Lobsterass,

In the Header builder, duplicate the bar that you currently have.

Then in the now second bar, change the language by replacing it with an image element for the logo.

Edit the settings of the second bar and set the Sticky Bar option to On then enable the Hide Initially option.

Hope this helps.

[Lobsterass]

Perfect. Thank you!
<3

[Prasant]

You are most welcome.

[Lobsterass]

Sorry! I just realized that the bottom items in my hero header are pushed down and initially invisible now.

Seems to be due to the hidden sticky nav. How can I adjust it?

[friech]

Hi @Lobsterass,

I see you applied height: 100vh on the banner bar, you need to offset the top bar’s height from 100vh. To do that, please update your Bar’s element CSS from:

$el.x-bar {
    min-height: 100vh !important;
}

to:

$el.x-bar {
    min-height: calc(100vh - 3.9em) !important;
}

Hope it helps,
Cheers!

[Lobsterass]

Thank you!

I got that CSS from the 23 header demo. That’s why I couldn’t figure it out myself.

FEATURE REQUESTS

1. A feature request place in Apex.
2. Full screen hero selection in Header Builder options.
3. Layered menu navigation - like Superfly (which breaks the whole site when activated)

Thanx for all your awesome work and great support!

<3

[jade]

Hi @Lobsterass,

Thanks for your feedback. I have added all these to our feature request list so that it will be considered in future development.

Cheers!