"Hamburger" menu icon on mobile device

SPORTDADSPORTDAD Beginner grinnerTorontoRegistered Users Posts: 22 Big grins
edited July 6, 2016 in SmugMug Customization
How can i replace the MENU bar on the mobile site with the "hamburger" menu icon that you can see on Smugmug.com's mobile site? Apparently Smugmug did not use their own tools to build their site. So this needs to be done thru CSS. Anybody have an idea of how to accomplish that?

Jeff Vogan
SPORTDAD Sports Photography
www.sportdad.ca
«1

Comments

  • pilotdavepilotdave Major grins Registered Users Posts: 784 Major grins
    edited February 3, 2016
    SPORTDAD wrote: »
    How can i replace the MENU bar on the mobile site with the "hamburger" menu icon that you can see on Smugmug.com's mobile site? Apparently Smugmug did not use their own tools to build their site. So this needs to be done thru CSS. Anybody have an idea of how to accomplish that?

    Jeff Vogan
    SPORTDAD Sports Photography
    www.sportdad.ca

    To add the icon before the word menu, you can do this:

    .sm-user-ui .sm-h5:before {
    font-family: 'SmugMug Icon Font Regular';
    font-size: 15px;
    content: ' \e039 ';
    }

    Not sure i'd replace the word... might not be too obvious what it does. Also I haven't thoroughly tested that code... it works on your mobile homepage but no guarantees about other parts of your site.

    Dave
  • SPORTDADSPORTDAD Beginner grinner TorontoRegistered Users Posts: 22 Big grins
    edited February 4, 2016
    Thanks Dave. I am not looking to replace the word "menu" in the menu bar. I am trying to get rid of the menu bar altogether and have the menu "hamburger" icon in the top right-hand corner of the screen.

    The problem is that the menu bar is about 1/4 of the way down the screen on the mobile site and ruins the look of the photos I use in a full screen slideshow on the home page.

    Smugmug has exactly what I want on their mobile site. That is exactly what I want to implement.
  • pilotdavepilotdave Major grins Registered Users Posts: 784 Major grins
    edited February 4, 2016
    SPORTDAD wrote: »
    Thanks Dave. I am not looking to replace the word "menu" in the menu bar. I am trying to get rid of the menu bar altogether and have the menu "hamburger" icon in the top right-hand corner of the screen.

    The problem is that the menu bar is about 1/4 of the way down the screen on the mobile site and ruins the look of the photos I use in a full screen slideshow on the home page.

    Smugmug has exactly what I want on their mobile site. That is exactly what I want to implement.

    Try this:

    h5, .sm-h5 {
    position: fixed;
    top: 0px;
    right: 0px;
    visibility: hidden;
    }
    .sm-user-ui .sm-h5:before {
    font-family: 'SmugMug Icon Font Regular';
    font-size: 20px;
    content: ' \e039 ';
    visibility: visible;
    }

    I think that will still need some cleaning up but it's a start. See if it really works though. Also, probably need to use @media to target mobile devices only.

    Dave
  • oceanthrstyoceanthrsty Major grins Registered Users Posts: 134 Major grins
    edited April 4, 2016
    This code worked great and was able to get my hamburger working.

    The only other thing I'd like to do on the mobile version is left justify the logo and eliminate all the headroom above the slideshow. Again, to make it look more like the smugmug.com mobile site.

    My site is photos.glossyfinish.com if you need to take a look.
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoRegistered Users Posts: 213 Major grins
    edited April 5, 2016
    you think this would be stranded on SM for mobile site,looks a lot better.
  • oceanthrstyoceanthrsty Major grins Registered Users Posts: 134 Major grins
    edited April 14, 2016
    hate to do this.. but I gotta

    *bump*

    would love to get this resolved. Thanks!
  • pilotdavepilotdave Major grins Registered Users Posts: 784 Major grins
    edited April 14, 2016
    This code worked great and was able to get my hamburger working.

    The only other thing I'd like to do on the mobile version is left justify the logo and eliminate all the headroom above the slideshow. Again, to make it look more like the smugmug.com mobile site.

    My site is photos.glossyfinish.com if you need to take a look.

    For moving the logo, try:

    @media screen and (max-width: 670px)
    .sm-page-widget-logo .sm-page-widget-logo-align-left, .sm-page-widget-logo .sm-page-widget-logo-align-right {
    text-align: left!important;
    }

    Dave
  • oceanthrstyoceanthrsty Major grins Registered Users Posts: 134 Major grins
    edited April 15, 2016
    pilotdave wrote: »
    For moving the logo, try:

    @media screen and (max-width: 670px)
    .sm-page-widget-logo .sm-page-widget-logo-align-left, .sm-page-widget-logo .sm-page-widget-logo-align-right {
    text-align: left!important;
    }

    Dave

    Doesn't seem to want to override. If I go into the developer tools it still says 'center'. If I change it manually there it works. headscratch.gif
  • EtienneEtienne Big grins Registered Users Posts: 70 Big grins
    edited April 27, 2016
    to left justify the logo humburger, you can use the parent block of .sm-h5 which is : .sm-page-widget-nav-menu-expand

    .sm-page-widget-nav-menu-expand{
    text-align: left!important;
    }

    runs for me
  • oceanthrstyoceanthrsty Major grins Registered Users Posts: 134 Major grins
    edited May 4, 2016
    Etienne wrote: »
    to left justify the logo humburger, you can use the parent block of .sm-h5 which is : .sm-page-widget-nav-menu-expand

    .sm-page-widget-nav-menu-expand{
    text-align: left!important;
    }

    runs for me


    Thanks, but I'm fine with here the hamburger is (on the right side).
    I want my logo to be left justified at the same level as the hamburger. Just like it does on the Smugmug mobile site.

    sm.png
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoRegistered Users Posts: 213 Major grins
    edited May 4, 2016
    pilotdave wrote: »
    Try this:

    h5, .sm-h5 {
    position: fixed;
    top: 0px;
    right: 0px;
    visibility: hidden;
    }
    .sm-user-ui .sm-h5:before {
    font-family: 'SmugMug Icon Font Regular';
    font-size: 20px;
    content: ' \e039 ';
    visibility: visible;
    }

    I think that will still need some cleaning up but it's a start. See if it really works though. Also, probably need to use @media to target mobile devices only.

    Dave

    Hi Dave
    To put the word Menu under the hamburger, if you could help, that would be great
    Cheers
    Dave
  • pilotdavepilotdave Major grins Registered Users Posts: 784 Major grins
    edited May 4, 2016
    Djm3006 wrote: »
    Hi Dave
    To put the word Menu under the hamburger, if you could help, that would be great
    Cheers
    Dave

    Try adding:

    .sm-user-ui .sm-h5:after {
    position:relative;
    left: -25px;
    font-size: 10px;
    content: 'Menu';
    display: block;
    visibility: visible;
    }

    You might need to play with the -25px to get it to line up the way you want.

    This is probably not the right way to do it, but it seems to work.

    Dave
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoRegistered Users Posts: 213 Major grins
    edited May 4, 2016
    pilotdave wrote: »
    Try this:

    h5, .sm-h5 {
    position: fixed;
    top: 0px;
    right: 0px;
    visibility: hidden;
    }
    .sm-user-ui .sm-h5:before {
    font-family: 'SmugMug Icon Font Regular';
    font-size: 20px;
    content: ' \e039 ';
    visibility: visible;
    }

    I think that will still need some cleaning up but it's a start. See if it really works though. Also, probably need to use @media to target mobile devices only.

    Dave
    pilotdave wrote: »
    Try adding:

    .sm-user-ui .sm-h5:after {
    position:relative;
    left: -25px;
    font-size: 10px;
    content: 'Menu';
    display: block;
    visibility: visible;
    }

    You might need to play with the -25px to get it to line up the way you want.

    This is probably not the right way to do it, but it seems to work.

    Dave
    Big help, thanks for taking the time to do this for me.thumb.gif

    Dave
  • LaleneLalene Big grins Registered Users Posts: 30 Big grins
    edited May 5, 2016
    pilotdave wrote: »
    Try this:

    h5, .sm-h5 {
    position: fixed;
    top: 0px;
    right: 0px;
    visibility: hidden;
    }
    .sm-user-ui .sm-h5:before {
    font-family: 'SmugMug Icon Font Regular';
    font-size: 20px;
    content: ' \e039 ';
    visibility: visible;
    }

    I think that will still need some cleaning up but it's a start. See if it really works though. Also, probably need to use @media to target mobile devices only.

    Dave

    How would you remove the Menu box on mobile? I want the hamburger icon only. I tried this code but i get box, the Menu box and the hamburger icon.

    Thanks :D
  • pilotdavepilotdave Major grins Registered Users Posts: 784 Major grins
    edited May 5, 2016
    Lalene wrote: »
    How would you remove the Menu box on mobile? I want the hamburger icon only. I tried this code but i get box, the Menu box and the hamburger icon.

    Thanks :D

    When I test the code on your site with developer tools, it looks like it's working properly. Can you put it back so I can see what it's really doing? Thanks,

    Dave
  • LaleneLalene Big grins Registered Users Posts: 30 Big grins
    edited May 5, 2016
    pilotdave wrote: »
    When I test the code on your site with developer tools, it looks like it's working properly. Can you put it back so I can see what it's really doing? Thanks,

    Dave

    Now it's working perfectly. Thanks a million! clap.gif
  • rafaelcardosofotografiarafaelcardosofotografia rafaelcardosofotografia Registered Users Posts: 1 Beginner grinner
    edited July 6, 2016
    Menu Box is still showing
    Hello guys! It works smoothly for me, except that the menu box is still showing.

    How can I hide/remove it?

    Thanks
  • BeGeBeGe IndiaRegistered Users Posts: 7 Big grins
    @oceanthrsty , I chceked your website 'photos.glossyfinish.com', I i too want the same hamburger menu in my mobile view. Could you please share the code you used, so I can try it with my site.


    www.binoygeorgephotography.com

    Thanks
    Binoy
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoRegistered Users Posts: 213 Major grins
    edited March 25, 2017

    @BeGe said:
    @oceanthrsty , I chceked your website 'photos.glossyfinish.com', I i too want the same hamburger menu in my mobile view. Could you please share the code you used, so I can try it with my site.





    www.binoygeorgephotography.com



    Thanks

    Binoy

    Hi BeGe, this is what I use on mine, another option for you

    / * hamburger menu withe the word menu */
    .sm-page-widget-nav h5, .sm-page-widget-nav .sm-h5 {
    position: fixed;
    top: 0px;
    right: -15px;
    visibility: hidden;
    }
    .sm-page-widget-nav .sm-h5:before {
    font-family: 'SmugMug Icon Font Regular';
    font-size: 40px;
    content: ' \e039 ';
    visibility: visible;
    }
    / * word "Menu" under Hambuger * /
    .sm-page-widget-nav .sm-h5:after {
    position:relative;
    top: -20px;
    left: -17px;
    font-size: 10px;
    content: 'Menu';
    display: block;
    visibility: visible;
    }

  • BeGeBeGe IndiaRegistered Users Posts: 7 Big grins
    > @Djm3006 said:
    > @BeGe said:
    > @oceanthrsty , I chceked your website 'photos.glossyfinish.com', I i too want the same hamburger menu in my mobile view. Could you please share the code you used, so I can try it with my site.
    >
    >
    >
    >
    >
    > www.binoygeorgephotography.com
    >
    >
    >
    > Thanks
    >
    > Binoy
    >
    >
    >
    >
    >
    > Hi BeGe, this is what I use on mine, another option for you
    >
    > /* hamburger menu withe the word menu /
    > h5, .sm-h5 {
    > position: fixed;
    > top: 0px;
    > right: -15px;
    > visibility: hidden;
    > }
    > .sm-user-ui .sm-h5:before {
    > font-family: 'SmugMug Icon Font Regular';
    > font-size: 40px;
    > content: ' \e039 ';
    > visibility: visible;
    > }
    > / word "Menu" under Hambuger*/
    > .sm-user-ui .sm-h5:after {
    > position:relative;
    > top: -20px;
    > left: -17px;
    > font-size: 10px;
    > content: 'Menu';
    > display: block;
    > visibility: visible;
    > }

    _________________________________________

    @Djm3006 , I tried your code, but unfortunatly for me it is not working. Instead of the hamburger icon, im getting 2 times MENU, one below the other. Not sure whats the issue though.
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,925 Major grins
    edited March 18, 2017

    BeGe
    Looking at your last post you're missing a * in this in the quoted part.
    / word "Menu" under Hambuger*/

    Should be /* and */

    Djm3006, you need to correct your post for this also.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoRegistered Users Posts: 213 Major grins

    @Allen said:
    BeGe
    Looking at your last post you're missing a * in this in the quoted part.
    / word "Menu" under Hambuger*/

    Should be /* and */

    Djm3006, you need to correct your post for this also.

    thats Allen

  • BeGeBeGe IndiaRegistered Users Posts: 7 Big grins
    > @Djm3006 said:
    > @Allen said:
    > BeGe
    > Looking at your last post you're missing a * in this in the quoted part.
    > / word "Menu" under Hambuger*/
    >
    > Should be /* and */
    >
    > Djm3006, you need to correct your post for this also.
    >
    >
    >
    >
    >
    > thats Allen

    > @Allen said:
    > BeGe
    > Looking at your last post you're missing a * in this in the quoted part.
    > / word "Menu" under Hambuger*/
    >
    > Should be /* and */
    >
    > Djm3006, you need to correct your post for this also.

    Thanks @Allen
    Unfortunatly even after adding the * (removing the commenting), it didnt work for me (Hamburger menu didnt appear). Im not sure whats else could be the reason.

    Any ways thank for your time and suggestions.

    -Binoy
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,243 Major grins
    edited March 18, 2017

    @BeGe said:
    Thanks @Allen
    Unfortunatly even after adding the * (removing the commenting), it didnt work for me (Hamburger menu didnt appear). Im not sure whats else could be the reason.

    Any ways thank for your time and suggestions.

    -Binoy

    You need to set 'Collapse for Mobile' to "ON" on your menu first.

  • BeGeBeGe IndiaRegistered Users Posts: 7 Big grins

    Hi @Hikin' Mike , I turned 'Collapse for Mobile' to OFF, since my hamburger menu didnt work. I didnt want a BIG MENU bar in center of the screen, instead the non-collapsed menu looked better without interfearing much with the background.

    Any ways, thanks for your time. :smile:

  • SPORTDADSPORTDAD Beginner grinner TorontoRegistered Users Posts: 22 Big grins

    Thanks for all of the responses to my question. With all the back and forth with comments and additional code suggestions, I've lost track of what code I'd need to insert to have the hamburger menu on the top right and my logo with top left or top centre. I'd like the hamburger only to appear on a smartphone. My current website looks fine on an iPad. Could I ask to have the entire block of code I'd need to insert posted here please? I'd love to remove the big menu bar from my website and replace it with the hamburger icon. Thank you!

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,243 Major grins
    edited June 7, 2017

    @SPORTDAD said:
    Thanks for all of the responses to my question. With all the back and forth with comments and additional code suggestions, I've lost track of what code I'd need to insert to have the hamburger menu on the top right and my logo with top left or top centre. I'd like the hamburger only to appear on a smartphone. My current website looks fine on an iPad. Could I ask to have the entire block of code I'd need to insert posted here please? I'd love to remove the big menu bar from my website and replace it with the hamburger icon. Thank you!

    That's why I hate it when people add their questions. Better to just create a new thread.

    Anyway, this will remove the text 'Menu', add hamburger menu to the top-right and move your logo to the left for small devices (400px or smaller).

    /**
    * Adds Hamburger Menu for Devices 400px or Smaller
    *****************************************************************************************************************/
    @media only screen and (max-width: 400px) {
    
        .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 {
            position: absolute;
            top: 0;
            right: -15px;
            z-index: 1;
            }
    
    }       
    
  • SPORTDADSPORTDAD Beginner grinner TorontoRegistered Users Posts: 22 Big grins
    edited March 20, 2017

    Hikin'Mike, THANK YOU THANK YOU THANK YOU!!! It works very well on my iPhone when in portrait, but the old Menu bar reappears instead of the hamburger when the iPhone is turned horizontal. I may try and switch the alignment because the menu items that drop down when i click the hamburger are left aligned but on the right hand side of the screen. It may be cosmetically better if I put the hamburger on the top left corner. Thanks so much for your awesome help!

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

    @SPORTDAD said:
    Hikin'Mike, THANK YOU THANK YOU THANK YOU!!! It works very well on my iPhone when in portrait, but the old Menu bar reappears instead of the hamburger when the iPhone is turned horizontal. I may try and switch the alignment because the menu items that drop down when i click the hamburger are left aligned but on the right hand side of the screen. It may be cosmetically better if I put the hamburger on the top left corner. Thanks so much for your awesome help!

    Keep in mind that it isn't because it's resizing because it's an iPhone, it's the screen size. I set it for 400px, but you can change that to suit.

  • BeautifulWorldBeautifulWorld Beginner grinner ChicagoRegistered Users Posts: 62 Big grins

    @Hikin' Mike said:

    @SPORTDAD said:
    Thanks for all of the responses to my question. With all the back and forth with comments and additional code suggestions, I've lost track of what code I'd need to insert to have the hamburger menu on the top right and my logo with top left or top centre. I'd like the hamburger only to appear on a smartphone. My current website looks fine on an iPad. Could I ask to have the entire block of code I'd need to insert posted here please? I'd love to remove the big menu bar from my website and replace it with the hamburger icon. Thank you!

    That's why I hate it when people add their questions. Better to just create a new thread.

    Anyway, this will remove the text 'Menu', add hamburger menu to the top-right and move your logo to the left for small devices (400px or smaller).

    /**
    * Adds Hamburger Menu for Small Devices Only
    ******************************************************/
    @media only screen and (max-width: 400px) {
    
        .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 {
            position: absolute;
            top: 0;
            right: -15px;
            }
    
    }       
    

    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

Sign In or Register to comment.