Off-canvas navigation menu for mobile only

IvosIvos Registered Users Posts: 7 Big grins
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!

Comments

  • IvosIvos Registered Users Posts: 7 Big grins
    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
  • IvosIvos Registered Users Posts: 7 Big grins
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited November 22, 2021

    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.

  • IvosIvos Registered Users Posts: 7 Big grins
    @"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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • IvosIvos Registered Users Posts: 7 Big grins
    @"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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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.

Sign In or Register to comment.