Off-canvas navigation menu for mobile only

Ivos

Hello, I'm new to Smugmug and am working on getting the mobile version of my site to incorporate an "off-canvas navigation menu". Meaning that when someone clicks on the hamburger menu icon the menu slides in from the right side of the screen. I've done my due diligence in googling this before I posted on here but have only found CSS code to incorporate a hamburger menu and not the "off-canvas" action that I'm looking for. Is this something that can be done? Thanks!

Hikin' Mike

There you go...

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Off-Canvas-Navigation-Menu-For-SmugMug

Ivos

In case it's of any help this is my site www.ivosphotography.com

This is a demo of what I'm looking to do https://codepen.io/iamsaief/pen/ExPoNjm

Ivos

Thanks @"Hikin' Mike" through my searches I did stumble upon that website however, I found that this code also applied the off-canvas navigation to the desktop version of my website. Is there any way to only have it apply to the mobile version?

Hikin' Mike

Haven't tried it, but if you don't enable the mobile menu, you should be able to hide the off-canvas menu using a media query in CSS. So the regular menu will display until the screen size shrinks to 736px (or what ever you want) and displays the off-canvas menu.

Ivos

@"Hikin' Mike" that makes sense. I'm new to CSS coding but am quick to learn. Do you know of a site that has these "if-then" queries I could leverage?

Hikin' Mike

Just add this in the CSS:

/*
* Hides Off-Canvas Menu on Desktop
***************************************/
@media (max-width:736px) {

  .container {display: none;}

}

Smugmug uses 736px or smaller as a mobile, but you can change it to suit your needs.

Ivos

@"Hikin' Mike" Thanks so much for your help! After trying this, I didn't like how the off-canvas navigation menu looked on mobile so I reverted back to using the collapsible menu. A second question for you.. I'm checking my site on both a phone and a tablet to make sure all looks good. I'd like for the tablet to also display the hamburger menu but it is currently displaying the desktop menu. I've tried adding your code above and have exaggerated the max-width to make sure it includes the tablet width but there is no change. Below is the full code I'm using. Putting it in a CSS block within the "Entire Site" section. This seems like a simple fix but my feeble attempts have failed. Any advice?

/*** 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: 35px;
width: 35px;
line-height: 10px;
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: -55px;/* 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: none;
}

.sm-user-ui .sm-page-widget-logo-text-container {
margin: 10px 0;
}

@media only screen and (max-width:3000px) {

.container {display: none;}

Hikin' Mike

@Ivos said:
@Hikin' Mike Thanks so much for your help! After trying this, I didn't like how the off-canvas navigation menu looked on mobile so I reverted back to using the collapsible menu. A second question for you.. I'm checking my site on both a phone and a tablet to make sure all looks good. I'd like for the tablet to also display the hamburger menu but it is currently displaying the desktop menu. I've tried adding your code above and have exaggerated the max-width to make sure it includes the tablet width but there is no change. Below is the full code I'm using. Putting it in a CSS block within the "Entire Site" section. This seems like a simple fix but my feeble attempts have failed. Any advice?

Since you reverted to Smugmug's mobile menu, the mobile break point is 736px. Screen size above 736px will display the "desktop" menu. Anything smaller than 736px will display the "mobile" (hamburger) menu. You/we can't change that.

Hikin' Mike

.