Menu icon Foundation
Page jumps to top on top-bar hamburger icon click

Hello,

I'm using the Foundation 4 top-bar.

When the browser window is reduced to less than 768px the top-bar changes to the small version. Once the scrolled down the top-bar is fixed to the top of the browser window. This is all good. However once the menu dropdown is toggled, I am sent to the beginning of the page and have to scroll back down to reach the top-bar menu.

You can experience the problem here. [Edit: Link removed]

I am trying to find a solution however I don't see the reason why this should be happening.

Many thanks in advance,

Wing-Hou Chan

top-barFoundation 4

Hello,

I'm using the Foundation 4 top-bar.

When the browser window is reduced to less than 768px the top-bar changes to the small version. Once the scrolled down the top-bar is fixed to the top of the browser window. This is all good. However once the menu dropdown is toggled, I am sent to the beginning of the page and have to scroll back down to reach the top-bar menu.

You can experience the problem here. [Edit: Link removed]

I am trying to find a solution however I don't see the reason why this should be happening.

Many thanks in advance,

Wing-Hou Chan

This post has been closed. No new replies can be added.

Alok Jethanandani almost 4 years ago

Hey Wing-Hou, one workaround for this is to set an anchor tag on the navigation and for each link in the navigation, append the anchor link so the page jumps back to where the navigation is at.

So what you would do is something like this:

<a href="#nav">
<div class="contain-to-grid sticky nav">
   <nav class="top-bar" style="">
    <ul class="title-area">
        ....
     </ul>
    </section></nav>
  </div>
</a>

And then your links like this one, append the anchor link:

<ul class="left">
      <li><a href="http://testdomain1.hostoi.com#nav">Home</a></li>
       ....
</ul>

This might be the easiest way to fix this problem. But I wanted to ask why you want to show the school's logo and hero picture above the navigation. That's kind of a weird place to keep those two things.

Wing-Hou Chan almost 4 years ago

Hi Alok,

Thank you for the reply! I will implement it later this week as I don't have time to do it now and let you know if it worked afterwards.

Regarding your question, I find that placing the nav under the hero graphic is more aesthetically pleasing. I don't think it is 'weird', although it might not be as widely implemented as other alternatives though I have seen it implemented before and I think in this case it is right.

Many thanks,

Wing-Hou Chan

Alok Jethanandani almost 4 years ago

I would strongly suggest considering whether aesthetics should take precedence over functionality. The nav is more critical to your end-users. Just my two cents.

Josef Ulander almost 4 years ago

This should solve your problem:

<nav class="top-bar" data-topbar data-options="scrolltop:false;">

Wing-Hou Chan over 3 years ago

Hey Alok!

Unfortunately, that didn't work for me but thank you for your help!

Hey Josef!

That worked for me! Thank you so much!