Big Cartel Theme Support

How do I turn off the mobile menu bar auto-hide and floating behaviour?

How do I turn off the mobile menu bar auto-hide and floating behaviour?

The mobile menu bar - defined in An introduction to navigation menus - is designed to float above page content, at the top of the viewer’s mobile device screen, so that it is readily available to them.

Additionally, the bar will auto-hide if the viewer is scrolling downwards, as this indicates they are actively viewing page content and the maximum screen space is ideal. The bar will only reveal itself again if the viewer starts scrolling back up the page, indicating that they may be seeking access to the navigation menu.

To remove the mobile menu bar behaviour described above, navigate to your custom style coding area - see Where do I add custom style code? - and paste in the custom CSS from the following sections as needed.

Disable mobile menu bar auto-hide

To disable your mobile menu bar auto-hide behaviour, add the following to your custom style coding area:

/* Disable mobile menu bar auto-hide */
#mobile-bar > .inner {
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

Click the Done and then Save links to apply your changes.

Disable mobile menu bar floating

To disable your mobile menu bar floating behaviour, add the following to your custom style coding area (note that this code includes the disable auto-hide code from above):

/* Disable mobile menu bar floating */
#mobile-bar {
	position: absolute;
}
.mobile-ui-on #mobile-bar,
.mobile-ui-on #mobile-bar + .top-menu-clone {
	display: block !important;
	opacity: 1 !important;
}
#mobile-bar > .inner {
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

Click the Done and then Save links to apply your changes.

AarcadeHow do I turn off the mobile menu bar auto-hide and floating behaviour?