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 */