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: -5px;/* adjust for logo */ to suit.
CSS
/**
* 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: -5px;/* adjust for your logo */
right: 10px;
z-index: 1;
}
.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;
}
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 ;
}