Relume Community Icon

Relume Community

Fixing Nav Bar Issues: Scroll Links and Mobile Menu Problems | Relume Community

Fixing Nav Bar Issues: Scroll Links and Mobile Menu Problems

·

Hi, I’m having an issue with my nav bar. All my nav links scroll to a section on the home page. I set each link to scroll to that section of the page which works. But I have a couple of separate pages and this causes an issue. I tried to get around this by setting the link to a URL with /#[section-id]. This also works except with the mobile nav menu. If I am on the home page in mobile view (hamburger menu), and I click on a link, it scrolls to the section but the nav menu doesn’t close. I’ve also tried unlinking the nav component on the home page and creating a duplicate nav link with a new class name but for some reason this changes the nav bar component links on the other pages too.

4 comments

Matt J.
·
Sam ive had this issue, i would create a component out of the list of links and maintain two separate components. Its messy. You might be able to find some JS way but I dont know how.
Sam
·
Wow, quite messy but it did fix the menu closing issue. There is another issue though - because my navbar is sticky, when it scrolls to the section, the top part of that section is cut off (it gets more cut off the smaller the viewport is). I changed it to 'fixed' and added an empty div to give the hero some space. This works except when navigating to that section from the other pages (top part gets cut off again). Any ideas?
Matt J.
·
yeah, these are all workarounds from years-old webflow bugs unfortunately. My way around this is to create an empty div that holds the ID for that section, and offset it above the actual section the same height as your navbar. So within each section_ you'll have lets say a section_anchor - give it the unique ID of that section. Then give a position absolute, width 100%, height the height of your navbar - most likely somewhere around 4.5rem. Then do a top position of -4.5rem (or whatever height your navbar is. Make sure to have position relative set on your section_ div.
Sam
·
Works perfectly now, thank you!