Hamburger menu on mobile site?

scotthunterscotthunter Registered Users Posts: 45 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 Registered Users Posts: 1,101 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 Registered Users Posts: 45 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 Registered Users Posts: 226 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 Registered Users Posts: 5,448 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 Registered Users Posts: 45 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 Registered Users Posts: 5,448 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 Registered Users Posts: 45 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 Registered Users Posts: 5,448 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 Registered Users Posts: 45 Big grins

    Perfect, thanks

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

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

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 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 Registered Users Posts: 45 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 Registered Users Posts: 5,448 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 Registered Users Posts: 45 Big grins

    It all looks good now, thanks

  • QameraQamera Registered Users Posts: 5 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 Registered Users Posts: 5,448 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;}

  • photocitizenphotocitizen Registered Users Posts: 5 Big grins
    This is not working for me. I guess I'm not sure where to insert this CSS. I tried placing it in my active theme's custom CSS, but my mobile menu did not change. I still have the same text menus as on my PC instead of the hamburger menu I expected on my phone (Galaxy Note 9 with the latest Android version).
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @photocitizen said:
    This is not working for me. I guess I'm not sure where to insert this CSS. I tried placing it in my active theme's custom CSS, but my mobile menu did not change. I still have the same text menus as on my PC instead of the hamburger menu I expected on my phone (Galaxy Note 9 with the latest Android version).

    Please post your site. Since you are new, you can't post "live links" (clickable), but you can just type it in here.

  • photocitizenphotocitizen Registered Users Posts: 5 Big grins
    Hi Mike. I found my error. Today, I discovered the "collapse menu for mobile" setting. Now, the site has just the word "Menu" when viewed on my phone instead of the unwieldly list of ALL the links. I can live with that. Jasinspiredart.smugmug.com.
  • photocitizenphotocitizen Registered Users Posts: 5 Big grins
    Actually, I have one more issue with the menu. On my phone, in portrait mode, I see only the word "menu" which is what I want. When I rotate the phone to landscape mode, I see all the individual links and not the single word "menu." Can this be changed?

    Jasinspiredart.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 3, 2020

    I'm confused. I don't see the hamburger menu on your site. It says the regular SmugMug menu that says 'Menu'. This thread is about the having the hamburger menu icon: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Hamburger-Menu

    @photocitizen said:
    Actually, I have one more issue with the menu. On my phone, in portrait mode, I see only the word "menu" which is what I want. When I rotate the phone to landscape mode, I see all the individual links and not the single word "menu." Can this be changed?

    It isn't about the phone as much as how large the screen is. Devices that are 736px or smaller display the word "Menu".

  • ExtinctExtinct Registered Users Posts: 13 Big grins

    Hi Mike,
    the hamburger menu works well on my site. Is there a way to not center my links but to align them left and to provide them with a semi-transparent background?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 12, 2020

    @Extinct said:
    Hi Mike,
    the hamburger menu works well on my site. Is there a way to not center my links but to align them left and to provide them with a semi-transparent background?

    You bet. Add this to your Theme's CSS:

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile.sm-page-widget-nav-collapsible .vertical .sm-page-widget-nav-toplink:first-child {margin-top: 0;}
    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile.sm-page-widget-nav-mobile-items-visible {
        text-align: left;
        padding: 10px;
        background-color: rgba( 0 ,0, 0, .25 );
    }
    

    You can adjust the opacity .25 from 0 (transparent) to 1 (solid).

  • ExtinctExtinct Registered Users Posts: 13 Big grins

    Hi Mike, you are great. Thank you for the super quick help.

  • bmetaylorbmetaylor Registered Users Posts: 18 Big grins
    I have followed all the great instruction to get a hamburger menu on my mobile site with my logo on the left and my hamburger icon on the right. My issue is that the hamburger icon is on the light below the logo. Can anyone help me out with getting them on the same line?

    Thanks for the assist!
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @bmetaylor said:
    I have followed all the great instruction to get a hamburger menu on my mobile site with my logo on the left and my hamburger icon on the right. My issue is that the hamburger icon is on the light below the logo. Can anyone help me out with getting them on the same line?

    Thanks for the assist!

    Create a new thread and post your site.

Sign In or Register to comment.