Mobile menu scrolling

Hello

How can I get the mobile menu to move as the page scrolls down?

Also how can I add a sentence to my product page under “Laser Tag Reservation”?

Hi Justin,

Thank you for writing in, to make the mobile navbar fixed, please add this to Theme Options > CSS

@media (max-width: 767px) {
	header .x-navbar.x-navbar-fixed-top {
		position: fixed;
	}
}

I tried to find it but I could not find “Laser Tag Reservation” anywhere on your pages, please provide us with a direct link of the product page.

Cheers!

Its that page
I will send a secure not with the login

Disregard that link it’s on this page

Also, the mobile bar works now when I scroll with the page, however when I scroll back to the top it glitches then cuts off a lot of the top sections.

how to fix that?

Hi Justin,

Please change that CSS to this

@media (max-width: 767px) {
	header.masthead .x-navbar.x-navbar-fixed-top {
		position: fixed;
	}
       header.masthead {
                min-height: 70px;
       }
}

Hope this helps.

It is still glitching and cutting off when you scroll back up.

Also now you can’t scroll down on the mobile menu

Hello Justin,

Please have the given css code updated and use this instead:

@media (max-width: 767px) {
	header.masthead .x-navbar.x-navbar-fixed-top {
		position: related;
	}

	header.masthead {
		min-height: 70px;
	}
}

We would loved to know if this has work for you. Thank you.

That didn’t work, it made the menu static.

Hi Justin,

Please find this custom CSS:

header.masthead .x-navbar.x-navbar-fixed-top {
	position: related;
}

And change to this:

header.masthead .x-navbar.x-navbar-fixed-top {
	position: fixed;
}

After that add this element CSS to your first section:

@media (max-width: 767px){
	$el {
		margin-top: 0 !important;
	}
}

Hope it helps :slight_smile:

That worked except now when the menu is open on mobile you can’t scroll down to see the other menu items

Hi Justin,

That’s the reason why sticky of fixed menu is not active on mobile menu by default. It’s only recommended on desktop since there is a big space and menu are horizontal. In mobile, the menu stay on position as you scroll which makes other menu outside the viewport of the mobile unreachable.

The solution is removing all the CSS provided on this thread about scrolling.

Thanks!

are there any other solutions to have the menu scroll with the user but be able to see the entire menu when opened?

Hi Justin,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

Is it possible to have a separate menu for mobile only?

Hello Justin,

Thanks for updating the thread.

In X Theme having a separate mobile mobile menu will require some custom development work and that falls outside the scope of support we can offer. However, in Pro Theme which comes with header builder you can easily have separate mobile menu using Pro Theme header builder.

Having said that if you would like to make the changes, please take a look at solution shared in following thread.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.