Hamburger menu on mobile site?

scotthunter · April 3, 2018

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

tomnovy · April 4, 2018

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

scotthunter · April 4, 2018

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

Djm3006 · April 5, 2018

@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' Mike · April 6, 2018

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

scotthunter · April 6, 2018

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

scotthunter · April 10, 2018

It didn’t work unfortunately
Sorry to be a pain, but could you post the amended code in its entirety?

Hikin' Mike · April 10, 2018

@scotthunter said:
It didn’t work unfortunately
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;
    }

scotthunter · April 11, 2018

Perfect, thanks

scotthunter · April 12, 2018

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

Hikin' Mike · April 12, 2018

@scotthunter said:
Do you know how to remove the bottom header margin on the mobile site?

What margins. I'm not really seeing any.

scotthunter · April 12, 2018

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

scotthunter · April 13, 2018

It all looks good now, thanks

Qamera · January 11, 2020

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' Mike · January 11, 2020

@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;}

photocitizen · May 2, 2020

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' Mike · May 2, 2020

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

photocitizen · May 2, 2020

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.

photocitizen · May 2, 2020

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

Extinct · May 12, 2020

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

Extinct · May 12, 2020

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

bmetaylor · May 25, 2020

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' Mike · May 25, 2020

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

Hamburger menu on mobile site?

Comments