Hamburger and Scrollable Menus for Mobile

Hi there,

you would need to add the Secondary Navigation to your site:

https://docs.generatepress.com/article/secondary-navigation-layout-overview/

And see this doc which explains how to keep the secondary nav always in desktop horizontal mode on mobile:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

If you want to set that up on the site, and once I can see it on the site, I can provide some CSS to make the nav scrollable

Hi there,

Can you implement this on the secondary menu to display horizontally first: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

After that, we can work on the CSS for the scrollable effect.

To move it below the header
Go to Customiser > Layout > Secodndary Navigation and check the Location to Below Header

To make the nav scrollable add this CSS:

/* Add horizontal scrolling */
nav#secondary-navigation .inside-navigation .main-nav ul {
	display: flex;
	flex-wrap: nowrap;
	width: fit-content;
}
nav#secondary-navigation .inside-navigation .main-nav {
	overflow-x: scroll;
}
nav#secondary-navigation .inside-navigation .main-nav ul li {
	white-space:nowrap;
}

/* Hide the scrollbar */
nav#secondary-navigation .inside-navigation .main-nav {
  overflow: auto;
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -webkit-overflow-scrolling: touch; /* Add smooth scrolling for Webkit browsers */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
nav#secondary-navigation .inside-navigation .main-nav::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

Glad to hear that