"Hamburger" menu icon on mobile device

SPORTDAD · February 3, 2016

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

pilotdave · 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

SPORTDAD · 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.

pilotdave · 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

oceanthrsty · 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.

Djm3006 · April 5, 2016

you think this would be stranded on SM for mobile site,looks a lot better.

oceanthrsty · April 14, 2016

hate to do this.. but I gotta

*bump*

would love to get this resolved. Thanks!

pilotdave · April 14, 2016

oceanthrsty wrote: »

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

oceanthrsty · 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.

Etienne · 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

oceanthrsty · 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.

Djm3006 · 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

pilotdave · 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

Djm3006 · 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.

Dave

Lalene · 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

pilotdave · 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

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

Lalene · 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!

rafaelcardosofotografia · 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

BeGe · March 17, 2017

@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

Djm3006 · March 17, 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;
}

BeGe · March 18, 2017

> @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.

Allen · 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.

Djm3006 · March 18, 2017

@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

BeGe · March 18, 2017

> @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' Mike · 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.

BeGe · March 19, 2017

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.

SPORTDAD · March 19, 2017

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' Mike · March 20, 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;
        }

}

SPORTDAD · 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' Mike · March 21, 2017

@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.

BeautifulWorld · June 6, 2017

@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

"Hamburger" menu icon on mobile device

Comments