Menu viewed on tablets or phones

Hi,

I have 2 questions related to the menu when viewed on a tablet or a phone:

1 - Is there a way to get the menu items to align next to each other, the same as it would be on desktop view? I have very view menu items and it would fit in next to each other.

2 - Is there a way to make the menu move back into subtracted position after a selection has been made? I would like to do this when viewing on a phone so that the menu doesn’t take up so much of the viewing space. I know you can click on it to retract, but I would like to do this automatically when a selection has been made or when you start scrolling.

Any help would be greatly appreciated!

Thanks!
Jemima

Hi,

I’ve managed to get the menu items to display next to each other, but I still need some help getting the menu to auto-hide once scrolling. I’ve tried some javascript, but it isn’t working correctly, so any suggestions would be appreciated!

Thanks!
Jemima

Hi Jemima,

​Please accept my apologies for the delay in response.

So you got some tweaks to your site’s menu?

I still need some help getting the menu to auto-hide once scrolling

Can you share a link to your website here, so I can inspect your current menu and find out the possibilities?

Regards,
Kharis
aThemes Support

Hi Kharis,

Unfortunately the site isn’t live yet, so I’ll have to explain what I’ve done so far.

I’ve made the mobile menu sticky using the following as I want the menu to be available due it being a one-page site:

    .top-bar {
        position: fixed !important;
    }

I would like the menu list that pops out once you click on the toggle button to automatically disappear once a selection has been made from the menu options or once someone start’s scrolling.

I think something like this might work, but I can’t get it to work…maybe you know of something similar that can be used with Moesia specifically:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("main-navigation").style.top = "0";
  } else {
    document.getElementById("main-navigation").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}