Need Help With Global Navigation Bar Linking Issue

Hi Webflow community,

Context

So, I have been building my portfolio, and I’m now at the stage of fixing any bugs that remain.

One of the said bugs I’m especially finding difficult to solve is with my global navigation at the top of my site. There are three text buttons which should direct the user to the separate sections of my homepage, no matter which page of the site they are currently on. These buttons being: Work, About and Contact.

This global navigation and these buttons all live within a single “Navbar Wrapper” symbol, which is duplicated across each page of my site for a consistent way of navigating.

Using the site on a tablet or mobile device will introduce and replace the buttons with a hamburger menu that conceals these aforementioned buttons. This menu reacts by altering the overflow property of a page’s body element so that the user can NOT scroll the page’s main elements underneath the now opened hamburger menu (what is essentially the menu’s background in a way) when interacting with the menu. This is achieved by using the code below:

<script>
$('.menu-button,.navbar-link').on('click',function(){
  $('body').toggleClass('no-scroll');
});
</script>

Note: This hamburger menu code is currently placed within the site’s custom code instead of page-sepcific custom code for efficiency reasons. This is why you will not see the code in the designer.

Problem

The issue lies with the linking of the three text buttons mentioned previously. In short, there are two current undesired possibilities. These being:

First Possibility

The three buttons each hold a “Section” Type directing to their appropriate sections on the homepage. This “solution” works perfectly only on the homepage since they’re not URL Type links and so can not work on any other page since these sections only exist on the homepage and should be directing to said homepage anyway.

This possibility is not the way.

Second Possibility

The three buttons each hold a “URL” Type directing to their appropriate sections on the homepage using the following URL structure: .com/#work-one, .com/#about and .com/#contact. This solution allows the global navigation symbol to “work” on all pages that it exists within.

Bug 1: However, on desktop, on any page other than the homepage, the three buttons direct only somewhat to their relative section’s positions. It appears in testing that upon redirecting to any of the three sections on the homepage from a miscellaneous page, the homepage has scrolled just a bit too far from where it should (in other words, the positioning of the redirects are slightly off when on desktop).

Bug 2: On tablet or mobile, this solution brings another bug, where the aforementioned hamburger menu corrupts completely on interacting with its contents: the three text buttons will NOT direct the user to the sections as desired, and upon closing the menu via its icon, will most of the time NOT reverse its overflow state back to normal; breaking the site completely. This happens on any page when using a tablet of mobile, including the homepage.

This possibility is improved from the first with that it can direct users on any page, but can only do so currently from desktop without breaking the site completely, and even then is not fully baked.

With all that being said, if anyone can help me out with these two bugs, it would greatly be appreciated! My site’s “Read-Only” link is below:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Elliot,

Great detail, and TBH I haven’t read all of it. But a few things overall that might get you the effect you want.

First, you only have 3 menu items, so you may not need a hamburger menu at all. One option is to turn that off so that you get your normal menu items ( sized and arranged however you choose for mobile ).

image

Second, if you want to use External URLs rather than Section links, you don’t need the hostname. Instead of https://www.elliotgaye.com/#work-one, just use /#work-one with the leading forward slash. This is cleaner and will let you navigate properly in Webflow’s preview mode.

Third, rather than ID’ing your sections for navigation, you can separate that into an anchor link, like so;

<a name="work-one" style="top: -100px;"></a>

Place this in an HTML embed just before your section, it won’t be visible. Remove the ID from your section. Now #work-one will navigate to the anchor rather than the ID.

The benefit of this is that you can adjust where that scroll-to position is from the perspective of the browser. From memory, I’ve used a negative top styling for this, so that the scroll-to-position is more naturally eye-level. I haven’t used that technique for awhile, might be a negative margin-top instead.

Fourth, the nav & scrolling problems your having appear to be due to a script you have in your page;

<script>
$('.menu-button,.navbar-link').on('click',function(){
  $('body').toggleClass('no-scroll');
});
</script>

It might be in your site-wide </body> config, or in an HTML embed in one of your symbols. Ditch that, and most of your problems will go away.