Hamburger Menu Icon on Mobile Device

kgphotos

I am giving my site a fresh makeover and I wanted to add a Hamburger Menu icon on my site for mobile devices. I've been following another thread on this but with all of the back and forth comments it got complicated on what code to add and where. What I would like is to have the hamburger icon on the right side of my site for mobile devices with the word Menu next to it, if possible. I am a little good with coding as I have learned from this forum. I would like the code to do this as well as where to put it....I am going to say it goes in the Entire Site CSS box I have already. So it reads on the left side "Karen Grant Photography" and on the right side is the word Menu with the hamburger icon next to it.

My new site is: www.imaginelivecapture.com.

Thank you for your help!

kgphotos

Ok..thanks to @Hikin' Mike code on his site, I've got it partially working. When it is displayed on my iPhone I have my heading text then the hamburger icon on the next line to the right and then my tag line after that. When I click on the icon you can't read the links because my photo is hiding them. Is there a way to put the hamburger icon underneath my tag line and when it's clicked on it bumps my photo down- like the way it works without the code on mobile devices? Also, I would like this code to work on an iPad as well. When viewed on iPhone/iPad my menu bar gets a carriage return. See attached screenshots.

Thanks for your help!

My site: www.imaginelivecapture.com

Allen

I just added one to my mobile view. Had to set the z-index: 999; in the CSS.
This is for your menu widget.

@media only screen and (max-width: 699px) {
.sm-page-widget-5214866 {
z-index:999;}
}

But your text is not that visibly over the photo with the current color and no text background.

kgphotos

After playing around with the code for the hamburger icon, I've decided to just have my menu displayed. Thank you Allen for the code.

-Karen

Djm3006

Hi Karen, this is the one I use, If you don't want the word "Menu" under it don't put the last bit in, cheers Dave
/ * hamburger * /
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 hamburger * /
.sm-user-ui .sm-h5:after {
position:relative;
top: -20px;
left: -17px;
font-size: 10px;
content: 'Menu';
display: block;
visibility: visible;
}

kgphotos

Hi @Djm3006, thank you so much for the code! Your code works the way I want it to, however, the position of it when viewed on my iPhone it is covering up the ending of my logo text (see screenshot). Is there a way to move that icon down so it is centered on the second line so it reads "Karen Grant Photography" on the first line, then the second line has the hamburger icon centered, then the third line has my sub text? Also when viewed on my iPhone in landscape mode it still list the menu bar. Anyway to hide the menu bar on it and just have the hamburger icon there? For the landscape view on the phone I would like to to be on the top line. I don't know if I am asking too much for this. I need help with this as I am not familiar with margins with CSS. I would guess that I have to use the @media callout. But I don't know how that works, so I would need help on that as well. Or if anyone else could help me out, that would be great!
Thanks!!!

kgphotos

Hi @Djm3006. Thanks so much for the code. It works the way I want it to, however when viewed on my iPhone in portrait mode, the icon appears over the ending of my logo text (see screenshot). Is there anyway to have the icon on the second line of text? So it reads "Karen Grant Photography" on the first line, then the second line has the icon centered, then the third line has my sub text. Also, when viewed on my iPhone or iPad the menu bar shows up when in horizontal mode. Is there a way to hide the menu bar on mobile devices and just have the hamburger icon visible? I am guessing I need to use @mobile to call it out, but I am not familiar with that, too. See above screenshot for what I am talking about. I don't know if I am asking to much here, but I am not very familiar with CSS margins and code. So I need help on this. I did give up on the icon at first, however after using you code it's given me hope to have an icon! Your code works it just needs to be tweaked. If you could help me or anyone else can that would be great! Thanks!

Side note...I did already post a reply to this but for some reason it disappeared. Apologies if the first one suddenly re-appears.

Djm3006

not that great with code myself, if you add a higher number to top: 20px; (play around with it)to that part of the code and see if it drops below your "Karen Grant Photography" header

kgphotos

I've been playing around with the code and I've got it where I want it (Yea!), however a few things still need to be tweaked. First, how do I move the hamburger icon closer to the word menu? (See screenshot). I want to move the icon to the left. This is the coding I have now:

/ * hamburger * /
h5, .sm-h5 {
position: fixed;
top: 20px;
center: 0px;
visibility: hidden;
}
.sm-user-ui .sm-h5:after {
font-family: 'SmugMug Icon Font Regular';
font-size: 40px;
content: ' \e039 ';
visibility: visible;
}

/ * Word “Menu” before hamburger * /
.sm-user-ui .sm-h5:before {
position:relative;
top: 35px;
left: -60px;
font-size: 18px;
content: 'Menu';
display: block;
visibility: visible;
}

Also, this code works great on my iPhone in portrait mode but I would like to have it be used on all mobile devices. Can anyone help me out with that code? Would it be possible when in landscape mode on mobile devices to have the icon an word "menu" to the right off my header? My goal is to hide the navbar on mobile devices- iPhones, iPads, etc and just use the hamburger icon on them.

Thanks for your help!
Karen

my website- www.imaginelivecapture.com!

kgphotos

Well, still playing around with the code, trying to get this work. I did manage to remove the thin line behind the icon. This is code I am currently using:

/ * hamburger * /
h5, .sm-h5 {
position: realtive;
top: 20px;
center 0px;
visibility: hidden;
}
.sm-user-ui .sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
font-size: 40px;
content: ' \e039 ';
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 ;
}

Looks good on my phone in portrait mode. Margins I think need to be adjusted on certain devices. I am using an iPhone. I just need to get it to work in horizontal mode on mobile devices. For horizontal mode, I would like to hide the menu bar and just have my header to the left and the hamburger icon on the right. I'd like it to look like smugmug has it on mobile devices. Can someone please help me out with the code?

my site.... www.imaginelivecapture.com

Thanks
Karen