Sticky Menu Troubles

I am trying to have my home page menu always start “stuck” to the bottom of the screen and then scroll up until it hits the top of the screen, then be “position sticky” at the top. I almost have it figured out, however depending upon the screen size, it doesn’t always start at the bottom. Sometimes it is below and you don’t see it. Other times, it is too high.

Here is an example of a website that I was inspired by to try this: (I don’t think this example is a webflow site)

Any help is appreciated.

Here is my site Read-Only: Webflow - Wesleyslandscape

Hi @Fivestones,

Your sticky Navbar is working as it should, and your issue with of the menu getting below the viewport is actually because height of the content above is greater than the viewport.

So in this situation you have to set the height of the hero section (section above the Navbar) so that both will be equal to the height of the viewport.

You should do something like this with JS or jQuery:
hero height = viewport height - navbar height

By the way, you may be looking for the script, so it should be some like this

$("#hero").height( $(window).height() - $("#navbar").height() );

There will be few more thing to take care, but you can try this code first.

Thank you for your help. I have tried this and it still doesn’t seem to work. I have tried setting the section above at 85% VH and then the Navbar at 15% (85+15=100%) But it still sits at a different location depending upon the computer screen that I am viewing it on. One will be perfect, the next one will sit below the bottom of the screen, and the next one is above it by 1/2".

Here is my new link: Webflow - Wesleyslandscape

@Fivestones When including the script in your project, make sure to include the opening (<script>) and closing (</script>) tags. It should look like this:

$("#section 9").height( $(window).height() - $("#navbar").height() );

Thank you. I am placing this in the Before tag on this particular page, correct? When I do this, do I make section9 position static, and do I set the height?

When I added the script that you provided, it didn’t change anything.

Thanks again for your help.

1 Like

I realized on my last post that I didn’t include my updated read-only link.
Here it is. Webflow - Wesleyslandscape

I am placing this in the Before tag on this particular page, correct?

Yes, that is correct. You can paste custom code inside the <head>tag or before the </body> tag.

When I added the script that you provided, it didn’t change anything.

The script is currently targeting the IDs #section 9 and #navbar. These have not been added to your elements in the Element Settings. Change # to . in order to target the classes directly. Alternatively, leave the script as it is and add the IDs.

I feel like I am getting closer, but still not working. (Thank you for the continued help). I added the ID’s in the Element Settings. (When I enter it, it automatically put a dash between Section-9. I tried changing the code to include the dash, and without. I also changed the # to . and that didn’t work either. Lastly, I also tried each of these in the and before the tag.

Anything else I am doing wrong?
Thanks again.

@Fivestones, I have created an example showing you exactly what you are trying to achieve. Check out the read-only link and the published site.

The script from @abirana is included in the custom code section. I’m targeting the classes .section_hero and .section_navbar. Alternatively, you can add IDs to your sections and use #yourID in the script instead.

Let me know if you can follow along and transfer this to your own site.