Sticky Nav + No Burger!

Hey everyone.

Im done with my homepage and quiet happy overall. There is just one thing that drives me crazy.

I want a sticky Nav, but NO burger for mobile View.

Problem: When I use the Nav bloc, I can’t deactivate the Burger for mobile view.

If I create my own nav (as done) I won’t get the STICKY option on my bloc.

It’s driving me crazy, what am I missing?

Thx in advance!

1 Like

Hi! I’m not sure, but you could try to assign the sticky class to your own nav (class manager).
Coole songs! Nullsummenspiel hat mich gerade sehr betroffen gemacht.

1 Like

Great Site!

1 Like

I don’t think there’s a way to turn off the hamburger for all breakpoints. Also, only way to get ‘sticky’ option is to add the navigation bloc or bric, as you get the component ‘Nav Bar’ in the layer tree section to the left of the design canvas. The only way to achieve what you want is a hack.

  • Add a list bric and in the settings section to the right for list, change the source to primary menu. then use the menu manager to create your full menu system (which i guess you have done).

  • Then inside the same bloc, add the navigation bric.

  • on the layer tree to the left of canvas, select ‘Nav Bar’ (it should be inside a column, if you expand them) then go to the settings panel to the right and uncheck include navigation and include logo.

  • If you now select the bloc you’re working on from the layer tree, Then go to the settings panel to the right, you will have the ‘Sticky’ option.

So you basically have two navigations but one is hidden and has no content.

2 Likes

Yeah I do think an extra selector on the right of mobile where we can have no hamburger will be great as would be nice and simple for say a 2 or 3 page site.

I have done it by not using the actual menu, but it would be nice to be able to have the option in the menu settings.

1 Like

The easiest way, it to take advantage of the classes Blocs already uses to achieve this.

Add a class .sticky-nav to your menu bar, Blocs will do the rest.

3 Likes

Hey @wolfganghofer , danke für die netten Worte :slightly_smiling_face: and yeah I tried sticky class on literally everything and it almost never works :sweat_smile:

@PeteSharp
unfortunately that doesn’t work. Never did for me.

@AdieJAM I never got why we are not allowed to disable the hamburger, I hate it :upside_down_face:

@AdamNotEve YOU ARE BRILLIANT! I wish I would’ve come up with that myself. It’s even possible to just hide the Nav completely on all breakpoints! Thank you so much for that easy and genius “hack”!

Thy everyone for helping!

2 Likes

It does for me, as per the video.

I am not in blocs, but I am assuming it’s using the CSS sticky-top property, so ensure you are applying it to a block, so it’s a child of the page-container. That could be the cause. :man_shrugging:

So here is the result!

Thx again, it worked pefectly fine!

4 Likes

Thats great

Sticky breaks usually when a parent element has an overflow set. Blocs tends to apply this to the .page-container that wraps everything. If you add some CSS to unset it, you will find sticky works again :wink: This is just the way it works in CSS.

Great site - works nice.

I did the same thing as you have done on my events website - but forgot how I did it now from memory!

2 Likes

Adrian this is a great site.
How did you do the “Awards and Gala Dinners” section.
I’m trying to do the same for days now with no success.
Can you please help with this?