Streaming live at 10am (PST)

Sticky Nav not aligning to footer

Hey guys, I’m doing a tutorial and I’m having trouble getting the navbar to line up flush with the footer when I reach the bottom of my page. Is there a way to make it adapt to any screen size? Any Ideas? Thank you!

What I’m trying to do.


Issue.

Link: https://preview.webflow.com/preview/design-build-launch-c58235?utm_medium=preview_link&utm_source=designer&utm_content=design-build-launch-c58235&preview=830960f200a9feb83016eca76b9a9caf&mode=preview

Hi @nyakuro,

If you create a combo class to remove the bottom padding on the last nav-line in your ‘footer-nav-group’ (image 1) and add the desired bottom padding to the ‘footer’ div’ (image 2), you should be able to adjust to your liking.

Regards,
Keiran

Image 1:

Image 2:

Thanks for the reply didn’t work. Did find a work around realized I didn’t design the other size screens so it wasn’t being responsive when I resize the window.

I now only have this problem when the screen is too small I scroll past the footer div and the navbar overlaps with the footer nav. Is there a way to stop the sticker header after a certain point?

Link: https://preview.webflow.com/preview/design-build-launch-c58235?utm_medium=preview_link&utm_source=designer&utm_content=design-build-launch-c58235&preview=830960f200a9feb83016eca76b9a9caf&mode=preview

Hi @nyakuro!

Yep! It is possible to stop sticker before footer.

Your sticker is following the content container div block. So, if you put your footer out of the content container, you will solve your problem.

You should just setup footer again to have padding/margins you were getting from content container.

Eve Kayser

1 Like