Options

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

  • Options
    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
  • Options
    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;
    }

  • Options
    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

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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.

  • Options
    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.

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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;.

  • Options
    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?

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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;
        }
    
  • Options
    scotthunterscotthunter Registered Users Posts: 45 Big grins

    Perfect, thanks

  • Options
    scotthunterscotthunter Registered Users Posts: 45 Big grins

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

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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.

  • Options
    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?

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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;
        }
    
  • Options
    scotthunterscotthunter Registered Users Posts: 45 Big grins

    It all looks good now, thanks

  • Options
    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!

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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;}

  • Options
    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).
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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.

  • Options
    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.
  • Options
    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
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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".

  • Options
    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?

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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).

  • Options
    ExtinctExtinct Registered Users Posts: 13 Big grins

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

  • Options
    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!
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 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.