Adding a Hamburger Menu for Mobile in SmugMug

This will add a “Hamburger Menu” on the top-right and your logo to the top-left, similar to SmugMug’s website, for mobile devices. Depending on your logo, you may need to adjust the top: -24px;/* adjust for logo */ to suit.

CSS


/**
* Adds Hamburger Menu for Mobile Devices
******************************************************/
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {text-align: left;}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {visibility: hidden;}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5::before {
	font-family: 'SmugMug Icon Font Regular';
	font-size: 48px;
	content: '\E039 ';
	display: block;
	visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {background: none;}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
	position: absolute;
	top: -24; /* adjust for your logo */
	right: 24px;
	transform: translateY(-100%);
	z-index: 1;
}

@media (max-width: 736px) {

	.sm-user-ui .sm-page-widget.sm-page-widget-nav .sm-page-widget-content {padding: 0 !important;}

}
/* Adds Hamburger Menu for Mobile Devices End */

If you just want to remove the word ‘Menu’ and add the Hamburger Menu, centered and below your logo, use this instead.

CSS


/**
* Change the text ‘Menu’ to a Hamburger Menu for Mobile Devices
*****************************************************************************/
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {visibility: hidden;}	

	.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5::before {
		font-family: 'SmugMug Icon Font Regular';
		font-size: 48px;
		line-height: 0px;
		content: '\E039 ';
		display: block;
		visibility: visible;
	}   

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {background: none ;}
/* Change the text ‘Menu’ to a Hamburger Menu for Mobile Devices End */