Hamburger menu on mobile site?

scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

Hi,

Can someone please provide the CSS code for a simple white hamburger icon in the top left corner of my mobile site, next to the site logo? I need it to expand down like the current one and it needs to clearly display the sublinks without any overlap and text justification to the left. This needs to replace the current grey menu bar so that the slideshow moves up to below the site logo. Can I have seperate code, one for "menu" text below the hamburger, and one without.

www.scotthunterphotography.com

Many thanks

Comments

  • tomnovytomnovy SmugMug Support Hero Leicester, United KingdomPosts: 1,089Registered Users SmugMug Employee

    Hey Scott. I am planing to write a tutorial about the menu that I have currently on my SmugMug site http://www.photom.me
    The tutorial should be ready in the next few weeks

    SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me
  • scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

    I managed to find this code from another site. I am nearly there but I want the logo to be left in the middle and the hamburger to be on the left.

    .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: left;
    top: 0px;/* adjust for your logo */
    right: 10px;
    z-index: 1;
    }

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

  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoPosts: 185Registered Users Major grins

    @tomnovy said:
    Hey Scott. I am planing to write a tutorial about the menu that I have currently on my SmugMug site http://www.photom.me
    The tutorial should be ready in the next few weeks

    loooking forward to it

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,649Registered Users Major grins

    @scotthunter said:
    I managed to find this code from another site. I am nearly there but I want the logo to be left in the middle and the hamburger to be on the left.

    Looks like it was part of my 'Adding a Hamburger Menu for Mobile in SMugMug' tutorial, but missing a few key steps. Just copy and paste the code from my tutorial. When it says top: -5px;/* adjust for your logo */, use top: -55px;/* adjust for your logo */ instead.

    That should get you close.

  • scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

    Thanks Mike.

    Looks fine now, expect I want the hamburger to be on the left not the right, and I want my site logo to remain in the centre.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,649Registered Users Major grins
    edited April 6, 2018

    @scotthunter said:
    Thanks Mike.

    Looks fine now, expect I want the hamburger to be on the left not the right, and I want my site logo to remain in the centre.

    Change text-align: left; to text-align: center;; left: 10px; to right: 10px; and float: left; to float: right;.

  • scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

    It didn’t work unfortunately :neutral:
    Sorry to be a pain, but could you post the amended code in its entirety?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,649Registered Users Major grins
    edited April 10, 2018

    @scotthunter said:
    It didn’t work unfortunately :neutral:
    Sorry to be a pain, but could you post the amended code in its entirety?

    No problem:

    /**
    * Hamburger Menu for Mobile Devices
    * Centers Logo, Menu to the Left
    ****************************************************************/
    .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: center;
        }
    
    .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: -55px;/* adjust for your logo */
        left: 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;
        }
    
  • scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

    Perfect, thanks

  • scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

    Do you know how to remove the bottom header margin on the mobile site?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,649Registered Users Major grins

    @scotthunter said:
    Do you know how to remove the bottom header margin on the mobile site?

    What margins. I'm not really seeing any.

  • scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

    There is a small gap below the H of my logo in mobile phone view when viewed on iPhone. Is there any way of either removing the gap below or increasing the top margin to make it look even?

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,649Registered Users Major grins
    edited April 12, 2018

    @scotthunter said:
    There is a small gap below the H of my logo in mobile phone view when viewed on iPhone. Is there any way of either removing the gap below or increasing the top margin to make it look even?

    I read that several times and I looked at the Footer and not the Header. I'll blame it on my stroke...lol!

    You can either add margin-top: 10pxto the top of your logo or remove margin-bottom: -10px to the bottom or your logo.

    Find this in your CSS:

    .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;
        }
    

    Added 10px to the top:

    .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;
        margin-top: 10px;
        }
    

    Remove 10px to the bottom:

    .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;
        margin-bottom: -10px;
        }
    
  • scotthunterscotthunter Exeter, EnglandPosts: 45Registered Users Big grins

    It all looks good now, thanks

  • QameraQamera See the world, Save our planet. Posts: 5Registered Users Big grins

    Just tried the code from further up, works pretty well. One problem: I have two menu's, one on the header and one on the footer. I'm wondering if there is a way to simply hide the footer menu on mobile? http://qamera.smugmug.com
    Thanks in advance!

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,649Registered Users Major grins

    @Qamera said:
    Just tried the code from further up, works pretty well. One problem: I have two menu's, one on the header and one on the footer. I'm wondering if there is a way to simply hide the footer menu on mobile? http://qamera.smugmug.com
    Thanks in advance!

    This should work:
    .sm-user-ui .sm-page-layout-region-footer .sm-page-widget-nav-mobile {display: none;}

Sign In or Register to comment.