"Hamburger" menu icon on mobile device

2

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    @BeautifulWorld said:
    Hi @Hikin' Mike this is great. I didn't want the background to be transparent so I changed background to white.
    One issue still is that the menu when it opens is not on top of everything. On my homepage the slideshow picture overlaps above the menu. If I expand the Best Of link, you can see how the white background doesn't go over the image.
    How do I change this?

    Thank you
    Karthik
    http://www.beautifulworld.photography

    Find this:

    .sm-user-ui .sm-page-widget-nav { 
        position: absolute; 
        top: 0px; 
        right: -15px;
        }
    

    Replace it with this:

    .sm-user-ui .sm-page-widget-nav { 
        position: absolute; 
        top: 0px; 
        right: -15px;
        z-index: 1;
        }
    
  • BeautifulWorldBeautifulWorld Beginner grinner ChicagoRegistered Users Posts: 64 Big grins

    Thank you @Hikin' Mike ! Works perfectly. The Penguins sure do have a game on their hands now!

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    @BeautifulWorld said:
    Thank you @Hikin' Mike ! Works perfectly. The Penguins sure do have a game on their hands now!

    Yes they do.

  • wormannwormann Big grins CARegistered Users Posts: 7 Big grins

    Thank you @Hikin' Mike for the Hamburger Menu CSS.
    I have it working on my site but don't like the way the "hamburger" scrolls down the page.
    Is there a way to fix this?

    Thanks
    Ann
    http://www.fourleafphotos.com

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    @wormann said:
    Thank you @Hikin' Mike for the Hamburger Menu CSS.
    I have it working on my site but don't like the way the "hamburger" scrolls down the page.
    Is there a way to fix this?

    Thanks
    Ann
    http://www.fourleafphotos.com

    Can you be more specific?

    I don't own a mobile device, but using ScreenFly (http://quirktools.com/screenfly/#u=http://www.fourleafphotos.com/&w=414&h=736&a=37&s=1), I'm not seeing anything wrong.

  • wormannwormann Big grins CARegistered Users Posts: 7 Big grins

    Hi @Hikin' Mike

    I have the menu consistent across the site. Think what's causing the confusion is the home screen scales due to the slideshow so you don't have to scroll down to see additional content.

    If you go to any other pages and scroll down the mobile hamburger menu icon scrolls with the page. Actual navigation links stay static at top of page once they are revealed - which I like.
    ScreenFly shows what I'm referring to if you scroll down from there on any page from the navigation menu. For example:
    http://www.fourleafphotography.com/About/AboutPrints

    I'm looking for the mobile menu icon to stay in place and not move on the top of each page across site.

    Thanks
    Ann
    http://www.fourleafphotos.com

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    @wormann said:
    Hi @Hikin' Mike

    I have the menu consistent across the site. Think what's causing the confusion is the home screen scales due to the slideshow so you don't have to scroll down to see additional content.

    If you go to any other pages and scroll down the mobile hamburger menu icon scrolls with the page. Actual navigation links stay static at top of page once they are revealed - which I like.
    ScreenFly shows what I'm referring to if you scroll down from there on any page from the navigation menu. For example:
    http://www.fourleafphotography.com/About/AboutPrints

    I'm looking for the mobile menu icon to stay in place and not move on the top of each page across site.

    Thanks
    Ann
    http://www.fourleafphotos.com

    Remove the hamburger menu code that you're using now. Use this instead:

    /**
    * Adds Hamburger Menu Top-Right Corner for Mobile Devices
    *****************************************************************************/
    .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: -195px;/* adjust hamburger for your logo */
        right: 10px;
        z-index: 1;
        }   
    
  • wormannwormann Big grins CARegistered Users Posts: 7 Big grins

    @Hikin' Mike

    Can't thank you enough! Mobile menu is now working exactly as I had hoped. Thanks again.

    Take care,
    Ann
    http://www.fourleafphotography.com

  • MarcRJacobsMarcRJacobs Big grins Los Gatos, CaRegistered Users Posts: 28 Big grins
    edited July 6, 2017

    Hi;

    This code fails for me in every case I try. Is it possible that the "Deco" theme I am using is the culprit?

    Also, I am putting the CSS code into the CSS block for Entire Site. Is that the correct place?

    I also tried removing my logo, thinking it was too large.

    Thanks,
    Marc

    http://marcrjacobs.smugmug.com

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    @MarcRJacobs said:
    Hi;

    This code fails for me in every case I try. Is it possible that the "Deco" theme I am using is the culprit?

    Also, I am putting the CSS code into the CSS block for Entire Site. Is that the correct place?

    I also tried removing my logo, thinking it was too large.

    Thanks,
    Marc

    http://marcrjacobs.smugmug.com

    I'm not seeing the code. You have to put it either in your theme's CSS or a CSS block for the whole site. You need to edit top: -195px;/* adjust hamburger for your logo */ for your logo. Try -65px.

  • MarcRJacobsMarcRJacobs Big grins Los Gatos, CaRegistered Users Posts: 28 Big grins

    Thank you so much, Hikin' Mike... I finally got it.
    ~Marc

    @Hikin' Mike said:

    @MarcRJacobs said:
    Hi;

    This code fails for me in every case I try. Is it possible that the "Deco" theme I am using is the culprit?

    Also, I am putting the CSS code into the CSS block for Entire Site. Is that the correct place?

    I also tried removing my logo, thinking it was too large.

    Thanks,
    Marc

    http://marcrjacobs.smugmug.com

    I'm not seeing the code. You have to put it either in your theme's CSS or a CSS block for the whole site. You need to edit top: -195px;/* adjust hamburger for your logo */ for your logo. Try -65px.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    Hello @Hikin' Mike,

    I would like to seek your help. Is there any CSS able to pop up on left side when I click on hamburger menu at mobile?

    Example website > http://www.photom.me/

    I did check out another link but it's not working for me > https://portal.photom.me/portal/how-to-add-a-full-screen-header-to-your-smugmug-site/

    My web is www.patrickkok.com

    Appreciate your sharing on the method.

    Regards,
    Patrick

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins
    edited February 21, 2018
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins
    edited February 22, 2018

    Had some time to look into the code. Add a HTML/CSS block where you want the menu.

    HTML:

    <nav>
    
        <div id="menuToggle">
    
            <input type="checkbox" autocomplete="off">
    
            <span></span>
            <span></span>
            <span></span>
    
            <ul id="menu">
    
                <li><a href="/">Home</a></li>
    
                <li><a href="/link-two">Link One</a></li>
    
                <li><a href="/link-two">Link Two</a></li>
    
                <li><a href="/link-three">Link Three</a></li>
    
            </ul>
    
        </div>
    
    </nav>
    

    CSS:

     a {
        text-decoration: none;
        color: yellow;
        -webkit-transition: color 0.3s ease;
                transition: color 0.3s ease;
        }
    
     a:hover {
        color: orange;
        }
    
    #menuToggle {
        display: block;
        position: absolute;
        top: 50px;
        left: 50px;
        z-index: 1;
        -webkit-user-select: none;
           -moz-user-select: none; 
            -ms-user-select: none;
                user-select: none;
        }
    
    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none;
           -moz-touch-callout: none;
            -ms-touch-callout: none;
                touch-callout: none;
        }
    
    #menuToggle span {
        background: blue;
        display: block;
        width: 30px;
        height: 3px;
        margin-bottom: 5px;
        position: relative;
        border-radius: 0;
        z-index: 1;
        -webkit-transform-origin: 4px 0;
                transform-origin: 4px 0;
        -webkit-transition: background 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 ), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 );
                transition: background 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 ), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 );
                transition: transform 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 ), background 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 ), opacity 0.55s ease;
                transition: transform 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 ), background 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 ), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0 );
        }
    
    #menuToggle span:first-child {
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
        }
    
    #menuToggle span:nth-last-child(2) {
        -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
        }
    
    #menuToggle input:checked~span {
        background: green;
        opacity: 1;
        -webkit-transform: rotate(45deg) translate(-2px, -1px);
                transform: rotate(45deg) translate(-2px, -1px);
        }
    
    #menuToggle input:checked~span:nth-last-child(3) {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.2, 0.2);
                transform: rotate(0deg) scale(0.2, 0.2);
        }
    
    #menuToggle input:checked~span:nth-last-child(2) {
        -webkit-transform: rotate(-45deg) translate(0, -1px);
                transform: rotate(-45deg) translate(0, -1px);
        }   
    
    #menu {
        background: gray;
        position: absolute;
        width: 300px;
        margin: -100px 0 0 -50px;
        padding: 125px 50px 50px;
        list-style-type: none;
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
        -webkit-transform: translate(-100%, 0);
                transform: translate(-100%, 0);
        -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
                transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
                transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
                transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        }
    
    #menu li {
        padding: 10px 0;    
        }
    
    #menuToggle input:checked~ul {
        -webkit-transform: none;
                transform: none;
        }
    

    You will need to edit the menu links for your site. You will also have to edit the colors to suit.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    Thanks @Hikin' Mike. I got few questions that hope to seek your assist.

    1. Can menu toggle appear in the middle and anywhere when I scroll down? I found that it only display at top page.

    2. Can hamburger menu disappear at dekstop version? I would like it appear at mobile version only because I have the menu words on top right side ( dekstop ) which is pretty good enough.

    Thank you very much Mike.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    @Hikin' Mike , Can I do sub link with html & css code?

    Example

    • Link 1 - Link 1a
      - Link 1b

    • Link 2 (remain)

    • Link 3 (remain)

    Thank you so much for your time to help me out. Appreciate.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    @patkok said:
    1. Can menu toggle appear in the middle and anywhere when I scroll down? I found that it only display at top page.

    You can make it fixed, but being centered may not work in all cases.

    @patkok said:
    2. Can hamburger menu disappear at dekstop version? I would like it appear at mobile version only because I have the menu words on top right side ( dekstop ) which is pretty good enough.

    Should be able to do that.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    @patkok said:
    @Hikin' Mike , Can I do sub link with html & css code?

    Example

    • Link 1 - Link 1a
      - Link 1b

    • Link 2 (remain)

    • Link 3 (remain)

    Thank you so much for your time to help me out. Appreciate.

    Like this:

            <ul id="menu">
    
                <li><a href="/">Home</a></li>
    
                <li><a href="/link-one">Link One</a></li>
    
                    <ul class="sub-menu">
    
                        <li><a href="/sub-link-one">Sub Link One</a></li>
    
                        <li><a href="/sub-link-two">Sub Link Two</a></li>
    
                    </ul>
    
                <li><a href="/link-two">Link Two</a></li>
    
                <li><a href="/link-three">Link Three</a></li>
    
            </ul>
    
    

    Add this to your CSS:

    .sub-menu {
        margin-left: 25px;
        }
    
  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    @Hikin' Mike said:

    @patkok said:
    1. Can menu toggle appear in the middle and anywhere when I scroll down? I found that it only display at top page.

    You can make it fixed, but being centered may not work in all cases.

    @patkok said:
    2. Can hamburger menu disappear at dekstop version? I would like it appear at mobile version only because I have the menu words on top right side ( dekstop ) which is pretty good enough.

    Should be able to do that.

    Can I get this both html & css from you to fixed it?

    Thank you Mike.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    @Hikin' Mike said:

    @patkok said:
    1. Can menu toggle appear in the middle and anywhere when I scroll down? I found that it only display at top page.

    You can make it fixed, but being centered may not work in all cases.

    @patkok said:
    2. Can hamburger menu disappear at dekstop version? I would like it appear at mobile version only because I have the menu words on top right side ( dekstop ) which is pretty good enough.

    Should be able to do that.

    I did for the fixed one ( Question 1 )

    Hope you can able to help me out to solve the ( Question 2 )

    • small hamburger in black is the one I need to hide at mobile.
    • grey color is the new one you gave, I woud like to remain it.

    Attachment :

    Thank you so much Mike.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    This will hide the "Pop-up Menu" on desktop, hides the "Hamburger Menu" on mobile, and displays the "Pop-up Menu" on mobile.

    nav,
    .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {display: none;}
    
    
    @media screen and ( max-width: 736px ){
        nav {display:block}
    }
    

    I'm about ready to go to bed, so I haven't had a chance to see about centering the menu. I'll take a look at it in the morning/afternoon.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins
    edited February 22, 2018

    Thanks a lot @Hikin' Mike.

    The tiny black color old hamburger still appear at my mobile version. Not sure how to hide it off.

    Attachment :

    You go to sleep first, have a good rest. You can help out once you have time tomorrow.

    Goodnight.

    Once again, thank you so much.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    The code I posted earlier worked on my site, but not yours. Use this instead:

    nav,
    .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header,
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {display: none;}
    
  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    @Hikin' Mike thank you so much for your help. It's really mean to me.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    Sorry @Hikin' Mike , I just tested. It goes back to this!

    Attachment :

    Do you have any idea to figure out the css?

    Thank you very much.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    I don't have a mobile device, so I can't test it. The only thing I can do is use `quirktools.com/screenfly/' to replicate it. According to that, you've re removed the code so I can't help you. All I can say is I'm 99.9 % sure the code I posted before works.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    @Hikin' Mike I just figure out the issue.

    CSS
    .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: 24px;
    content: '\E039 ';
    display: block;
    visibility: none;
    }

    originally visibility : visible.

    need to change to none than it will disappear.

    thank you so much for your help as well.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,424 Major grins

    Wasn't thinking (it was late) but since you are using a different hamburger menu, you can remove the old code. Glad you found a solution.

  • patkokpatkok MalaysiaRegistered Users Posts: 54 Big grins

    i don't dare to move any css now. it's working good so far.

    cheers!

  • BeautifulWorldBeautifulWorld Beginner grinner ChicagoRegistered Users Posts: 64 Big grins

    Hi @Hikin' Mike - Hope you are well. I am coming back to smugmug after a while and revamping my photos and galleries. I dug out your code for the hamburger menu. I like the way everything looks except for the gray bar below the menu icon.
    https://www.karthikrajaphotography.com/
    Not sure how to hide that away. Any ideas?

    Thanks
    Karthik

    CSS code currently used...

    /*
    * Made by Erik Terwan
    * 24th of November 2015
    * MIT License
    *
    *
    * If you are thinking of using this in
    * production code, beware of the browser
    * prefixes.
    */

    /* KR - not needed - simply used to design
    body
    {
    margin: 0;
    padding: 0;

    background: #ffffff;
    color: #cdcdcd;
    font-family: Roboto,Helvetica,Arial,sans-serif;
    }

    */

    /* KR - Setting the color of the text within the menu */
    a
    {
    text-decoration: none;
    color: #232323;

    transition: color 0.3s ease;
    }

    a:hover
    {
    color: #557718;
    }

    /* KR - Placing the hamburger on the page */

    menuToggle

    {
    display: inline;
    position: relative;
    top: 0px;
    left: 0px;
    float:left;

    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
    }

    /* KR - using this to display the menu toggle */

    menuToggle input

    {
    display: inline;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0; /* hide this /
    z-index: 2; /
    and place it over the hamburger */

    -webkit-touch-callout: none;
    }

    /*
    * Just a quick hamburger
    KR - use the margin-bottom to adjust space between bars
    */

    menuToggle span

    {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: #000000;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
    }

    menuToggle span:first-child

    {
    transform-origin: 0% 0%;
    }

    menuToggle span:nth-last-child(2)

    {
    transform-origin: 0% 100%;
    }

    /*
    * Transform all the slices of hamburger
    * into a crossmark.
    */

    menuToggle input:checked ~ span

    {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
    }

    /*
    * But let's hide the middle one.
    */

    menuToggle input:checked ~ span:nth-last-child(3)

    {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
    * Ohyeah and the last one should go the other direction
    */

    menuToggle input:checked ~ span:nth-last-child(2)

    {
    transform: rotate(-45deg) translate(0, -1px);
    }

    /*
    * Make this absolute positioned
    * at the top left of the screen
    KR - properties of the actual sliding menu
    margin - will set where the menu is on the page
    */

    menu

    {
    position: absolute;
    width: 200px;
    margin: 10px 0 0 0px;
    padding: 10px;
    padding-top: 5px;
    opacity: 1;

    background: #909195;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    /* KR - setting the font and spacing between list items inside the menu */

    menu li

    {
    padding: 5px 0;
    font-size: 22px;
    }

    /*
    * And let's slide it in from the left
    */

    menuToggle input:checked ~ ul

    {
    transform: none;
    }

    /* Mike - Adding a title and making it float right */
    .my-title {
    float:right;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    }

Sign In or Register to comment.