Hamburger menu on mobile site?

scotthunter

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

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

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

@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

@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

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

@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

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

Hikin' Mike

@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

Perfect, thanks

scotthunter

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

Hikin' Mike

@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

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

@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

It all looks good now, thanks

Qamera

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

@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

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

@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

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

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

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

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

@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

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

bmetaylor

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

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