Need Code for Sticky Navbar

I Need Help
1

After a week of testing webdesign software, I have bought blocs as it offers the most options to create websites. I’m still a beginner in designing websites and still learning what is possible on modern websites.
I have started a project with a picture on the top and a navbar below the picture. If I use the option sticky for the navbar, it will immediately jump to the top of the window when I begin to scroll. I search for an option, that the navbar will get sticky once it reaches the top of the window (and not before). When I tested Sparkle for example, this worked easily. Till now I haven’t found a possibility how to achieve this with blocs.
Is there anybody who can help me? I think I need to add some code to the page header and add the custom class to the bloc. Can anybody tell me the code I need for that? Thank you.

image
image.jpg1164×742 204 KB

Best regards
Michael

2

Hi Michael @miber

You’ll find below a quick sample file I just created for you. Code is added to the page settings under Header and Footer (for the script) and custom class for the menu. Also added some styling to the hamburger side menu.

Sticky Middle Nav.bloc (733.8 KB)

MDS

1 Like
3

Thank you very much for your help. That’s what I was searching for. I tried it in my project and it works.

I thought that there is a possibility without JavaScript. I googled and found information about the navbar in bootstrap: Navbar · Bootstrap

As it works with your code, I will use it.

Best regards
Michael

4

Michael you’re very welcome.

Just had a peek. Not sure the examples are for a navbar set in the “middle”. The javascript helps to smooth the transition and avoid any jump. However I will have a deeper look when I have more time.

MDS

5

What did you do to get this to work?

I need to get this behavior working I have tried copying the code from the example, but it does not work for me so I’m sure there is something I have missed.

What were the steps to get this working?

Any help will be greatly appreciated.

6

@handshaper you have code in:
Header; In Footer
And you have to add a class “menu” in the Navbars bloc.
Check if this what you missing.

7

Yes, I added the code to the header and the code to the footer, plus I created a menu class and attached it to the navbar bloc. I could not figure out if there was anything I needed to do in this class, or simply attaching it was enough given that the code seemed to be doing all of the work associated with it.

Not sure why it is not working for me, hmm!

8

OK, I just figured it out. I had to TURN OFF the sticky checkbox on the navbar in order for the code to work. The minute I did this it worked perfectly. Fantastic! I’m a happy camper!

Although I have to say this seems more like a bug to me, if something is set to be sticky it should only stick to an edge when it actually gets to the edge, right?