"Hamburger" menu icon on mobile device

Hikin' Mike

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

BeautifulWorld

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

Hikin' Mike

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

Yes they do.

wormann

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' Mike

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

wormann

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' Mike

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

wormann

@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

MarcRJacobs

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' Mike

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

MarcRJacobs

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.

patkok

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' Mike

See below...

Hikin' Mike

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.

patkok

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.

patkok

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

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

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

patkok

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

patkok

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

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.

patkok

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' Mike

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

patkok

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

patkok

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' Mike

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.

patkok

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

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.

patkok

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

cheers!

BeautifulWorld

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