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: -10px;/* 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;
width: 48px;
line-height: 24px;
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: -10px;/* adjust for your logo */
right: 24px;
z-index: 1;
transform: translateY(-100%);
}
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {float: left;}
.sm-user-ui .sm-page-widget-logo-text-container {margin: 10px 0;}
@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 change the word ‘Menu’ to the hamburger menu 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 */