Clicking 'Menu' on mobile browsers jerks the user to the top of the page

  • On mobile browsers (Android Chrome, iOS Chrome and iOS Safari), when scrolling down below the nav bar, the nav bar sticks to the top of the window so it is always accessible. When clicking on the nav bar after it has gone into this fixed hover mode, it takes the user to the top of page. The menu is open, but cannot be seen because the home page header image takes up most of the top of the screen (the nav menu is open just beneath the home page header image). This is a large issue since the main navigation menu is essentially inaccessible on mobile from the home page.

    I have a site using Gateway that needs to go live this week and this is a very important issue. Any tips on how I could fix this with custom CSS/JS code?

    I’m using Gateway.1.2.31

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Rescue Themes

    (@rescuethemes)

    Hi gbhatnag,

    This is easily modified by adding the data-option sticky_on: large; to the nav class in both header.php and header-home.php:

    https://foundation.zurb.com/docs/components/topbar.html#sticky-top-bar

    This will tell the navigation to only stick when viewed on large screens (desktop) and not to stick on mobile displays.

    So for example:

    <nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true;sticky_on: large;">

    I would suggest using a child theme if you aren’t already because this will require direct modifications of theme files:

    https://docs.rescuethemes.com/article/41-gateway-child-theme-download

    Thread Starter gbhatnag

    (@gbhatnag)

    Any way to have a sticky navbar that doesn’t jerk the user to the top of the page when clicked? Instead, the nav menu opens right at the location it was clicked… Seems like an easy enough issue to remedy using absolute positioning in JS/CSS, but I’m just not sure where to edit the JS that handles the click. Any advice there?

    I’m having the same issues with the theme. On mobile gives issues with Menu. Can use Jetpack for optimizing it, but takes away the themes look.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Clicking 'Menu' on mobile browsers jerks the user to the top of the page’ is closed to new replies.