Keeping Fixed NavBar fixed for 2nd Section to Last Section

I am needing help with fixing the navbar at the top of the browser, but just for my second through last sections of my web site. My first section is my splash page where you click a button to enter the site and it smoothly scrolls down to my home page, which is the second section of my web site.

When I fix the navbar it keeps the navbar at the top of all the sections, which of course I don’t want the navbar showing on my splash page.

Any suggestions? Thank you for any help!

First of all, you would want to make sure that you don’t have the navbar setup as a symbol, because then any changes would apply across all pages. I’d imagine you could add a class to it only on the pages you are wanting it to be fixed at the top of the page and apply the fixed position to that new class instead of the existing one.

Thanks! I will try that!!

I realized you were talking about pages instead of sections. I only have one page with multiple sections. I tried making a new class for it and giving it a fixed position at the top with the z index being the highest, but it’s still putting it in the first section.

Webflow has a video tutorial for this exact thing where the nav doesn’t appear till out of your first section (which is called the “hero” area), I believe it should answer your question :smiley:

1 Like

Thank you! That is exactly what I needed!!

1 Like

You’re welcome, glad it helped!

I got the NavBar working just like the video tutorial, which is great. But, you have to manually scroll down the page from first section (which is my splash page) to second section in order for it to work. I was hoping that when you click the link block on the splash page, which is set to scroll with easing motion to the second section, that the NavBar would ease into view just like when you manually scroll. Is there no way to give it the command to do the same thing when it scrolls down automatically from the first section to the second section when you click on the link block? Thanks for any help!

Hmm, if you did it exactly as the tutorial shows it should function when you click on your anchor link (aka the link block that sends you to a new section). At least I believe so … @thesergie ?

In order to see what it is that is causing the issue we need View/Read Only access to your website - can you please give us a link to the editor for it? (How to do it: How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow)

Here is the public link: https://webflow.com/design/bathtub-brewhouse-5?preview=a29f5ed1be91412d687bd4e19202210d

Thanks so much for any help. Really want to launch my site soon and these little things just keep slowing me down.

I figured out that if I change my anchor link to the next section below the section I want it to go to it does indeed work. I must have some kind of margin that is keeping it from recognizing it has scrolled to the section I want it to appear, which is the second section. Still trying to figure that mystery out.

Yes, this is odd… can’t see why it would behave like this. Not sure if it’s a bug or what. @thesergie @cyberdave @brryant Might know. Perhaps it has something to do with the 100% height that fits to the browser window, not sure.

For now, if you set the top margin on the “HeroBG” section to 1 px it fixes it … it adds a 1px line of empty space in between the very first section and it, but you can’t tell that anyways if the user clicks to scroll down as is intended.

Hi, adding 1px margin to the HeroBG section is probably the best solution here in this case. I tried it, and it worked.

Cheers

2 Likes

Thanks very much for your help! I will do that.

1 Like