Modify "Menu" box on mobile view

Lalene · May 1, 2016

Hi everyone,

I'm customizing my site now and like how it looks on desktop and tablet, but the Menu box seen on the mobile (vertical view) looks very unappealing. I dont want the whole nav bar visible (I think it looks even worse) and I was wondering if I could make that menu box smaller (less wide) or change its position.
Also, would it be possible to a) change the color of the social media icons just for mobile, b) hide it on mobile view?

My site is: www.marpaez.smugmug.com

Thanks a lot!

denisegoldberg · May 2, 2016

Take a look at this page to Change Features for Mobile or Tablet Browsers. One of the examples shows removing the social icons for mobile.

--- Denise

Lalene · May 3, 2016

denisegoldberg wrote: »

Take a look at this page to Change Features for Mobile or Tablet Browsers. One of the examples shows removing the social icons for mobile.

--- Denise

Thanks Denise!

That took care of the social media icons but the navbar is still huge on mobile ( I decided to make it "collapse for mobile"

Also, is it possible to make the left bar transparent only on mobile view?

Thanks a million.

Djm3006 · May 4, 2016

Lalene wrote: »

Thanks Denise!

That took care of the social media icons but the navbar is still huge on mobile ( I decided to make it "collapse for mobile"

Also, is it possible to make the left bar transparent only on mobile view?

Thanks a million.

Hi, have you considered a Hamburger menu ? for mobile view

Lalene · May 4, 2016

Djm3006 wrote: »

Hi, have you considered a Hamburger menu ? for mobile view

Thanks for the tip. I tried this code that I saw on another thread and although it added the hamburger menu icon, the word "Menu" still shows up

This is the code:

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

JWatson · May 16, 2016

Lalene wrote: »

Thanks for the tip. I tried this code that I saw on another thread and although it added the hamburger menu icon, the word "Menu" still shows up

This is the code:

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 ran into the same issue you did when I used the code. Another thread advised using the "@media" line you can see in the code below. It removed the word 'Menu' for me, but I still see a thin line where the menu bar used to be. I'm still trying to figure out how to remove the line, but other than that, it seems to work pretty good. I've adjusted the font size and position to suit my preference. Hope this helps you.

/* Hamburger Menu on Mobile */
@media only screen and (max-width: 640px) {
h5, .sm-h5 {
position: Fixed;
Top: 0px;
Left: 15px;
visibility: hidden;
}
.sm-user-ui .sm-h5:Before {
font-family: 'SmugMug Icon Font Regular';
font-size: 35px;
content: ' \e039 ';
visibility: visible;
}

denisegoldberg · May 16, 2016

Lalene wrote: »

...but the navbar is still huge on mobile ( I decided to make it "collapse for mobile"

I just looked at your site on my phone and there is no navbar at all. I see your header and a slideshow but there doesn't appear to be any way to go anywhere on your site except for your home page.

I have a Windows phone. Your site behaves the same when I hold the phone in either landscape or portrait mode.

--- Denise

Lille Ulven · May 16, 2016

@Denise that must be something specific to Windows phones (question is if that is than browser related or if it would be the same on Androids).
On my iPhone I can see the Hamburger-menu on the top left side.

What I do notice though: the menu turns into the "normal" menu type once I choose to go to to one of the subpages. I would think that the CSS for the Hamburger menu is not quite in the right place (maybe in a CSS box valid only for the homepage instead of in the "Entire website" CSS box?)

Good luck

Lille Ulven

denisegoldberg · May 16, 2016

Lille Ulven wrote: »

@Denise that must be something specific to Windows phones (question is if that is than browser related or if it would be the same on Androids).
On my iPhone I can see the Hamburger-menu on the top left side.

Very interesting Lille Ulven. The phone is running Windows 8.1 with Internet Explorer. I know that Windows is not a very popular phone but if it was my site I would be concerned about the non-entry to the site in that environment.

--- Denise

Lille Ulven · May 17, 2016

Of course, Denise, and I would be too. I tried this morning to figure out if I could find where Windows phones give up on this Hamburger Menu - or rather why they do. But all emulators that I have access to show the menu as they should. From what I see code-wise above, the only explanations would be that either \e039 or the font-family is not supported on your phone.
Unless of course it is the missing } ...
But we cannot test it anymore as the code has been taken out already

Lalene · May 17, 2016

denisegoldberg wrote: »

I just looked at your site on my phone and there is no navbar at all. I see your header and a slideshow but there doesn't appear to be any way to go anywhere on your site except for your home page.

I have a Windows phone. Your site behaves the same when I hold the phone in either landscape or portrait mode.

--- Denise

That's strange. I only have a hamburger menu on the Homepage. On the other pages I have the Menu box. I can see it on my Android phone. I wanted to put the hamburger menu on the other pages but it looked very bad.

Any idea on how I could fix that issue on Windows phone?

Lalene · May 17, 2016

JWatson wrote: »

I ran into the same issue you did when I used the code. Another thread advised using the "@media" line you can see in the code below. It removed the word 'Menu' for me, but I still see a thin line where the menu bar used to be. I'm still trying to figure out how to remove the line, but other than that, it seems to work pretty good. I've adjusted the font size and position to suit my preference. Hope this helps you.

/* Hamburger Menu on Mobile */
@media only screen and (max-width: 640px) {
h5, .sm-h5 {
position: Fixed;
Top: 0px;
Left: 15px;
visibility: hidden;
}
.sm-user-ui .sm-h5:Before {
font-family: 'SmugMug Icon Font Regular';
font-size: 35px;
content: ' \e039 ';
visibility: visible;
}

The way it worked for me was to add a code to make the Menu box transparent, in addition to having a code for a hamburger menu. That way you won't see the line.

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
box-shadow: 0px 0px 0px 0px #000000;
background-color: transparent;
}

Lille Ulven · May 17, 2016

Try adding this:

.sm-user-ui .sm-h5::Before {
font-family: 'SmugMug Icon Font Regular';
font-size: 35px;
content: ' \e039 ';
visibility: visible;
}

It's a long shot, but right now the best guess that I can offer.

Lille Ulven

Lalene · May 17, 2016

JWatson wrote: »

I ran into the same issue you did when I used the code. Another thread advised using the "@media" line you can see in the code below. It removed the word 'Menu' for me, but I still see a thin line where the menu bar used to be. I'm still trying to figure out how to remove the line, but other than that, it seems to work pretty good. I've adjusted the font size and position to suit my preference. Hope this helps you.

/* Hamburger Menu on Mobile */
@media only screen and (max-width: 640px) {
h5, .sm-h5 {
position: Fixed;
Top: 0px;
Left: 15px;
visibility: hidden;
}
.sm-user-ui .sm-h5:Before {
font-family: 'SmugMug Icon Font Regular';
font-size: 35px;
content: ' \e039 ';
visibility: visible;
}

One thing, does you hamburger icon moves down as you scroll down?

JWatson · May 17, 2016

Lalene wrote: »

One thing, does you hamburger icon moves down as you scroll down?

I was just about to reply saying that the hamburger icon does not stay at the top as I scroll, but I can see that it is actually still there, however it is behind the photos. If you position the photos so that the gap between them falls where the hamburger icon should be, you'll see one of the hamburger bars appear.

Looks like the next step is to find code to make sure the hamburger is on the top layer. I'll see if I can find something. Alternatively, the arrow that appears in the bottom right corner is a good alternative to return to the header.

Hikin' Mike · May 17, 2016

JWatson wrote: »

Looks like the next step is to find code to make sure the hamburger is on the top layer. I'll see if I can find something. Alternatively, the arrow that appears in the bottom right corner is a good alternative to return to the header.

Add `z-index: 100;` and see if that helps.

Djm3006 · May 18, 2016

FYI
this is all the CSS for the Hamburger on my site for mobile,stays at top when moving down and has the word "Menu" under hamburger. Works fine

/* Hamburger menu for Mobile */
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: 40px;
content: ' \e039 ';
visibility: visible;
}
@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;
}
.sm-user-ui .sm-h5:after {
position:relative;
top: -20px;
left: -17px;
font-size: 10px;
content: 'Menu';
display: block;
visibility: visible;
}

Lalene · May 19, 2016

Hikin' Mike wrote: »

Add `z-index: 100;` and see if that helps.

It didn't work :cry

Lalene · May 19, 2016

It still moves as I scroll :cry

Djm3006 wrote: »

FYI
this is all the CSS for the Hamburger on my site for mobile,stays at top when moving down and has the word "Menu" under hamburger. Works fine

/* Hamburger menu for Mobile */
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: 40px;
content: ' \e039 ';
visibility: visible;
}
@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;
}
.sm-user-ui .sm-h5:after {
position:relative;
top: -20px;
left: -17px;
font-size: 10px;
content: 'Menu';
display: block;
visibility: visible;
}

Djm3006 · May 20, 2016

Lalene wrote: »

It still moves as I scroll :cry

the only other thing I can think of that I have done is pin the header, log on to SM > Customize > entire site > Layout (right hand side)>Section (down the bottom) set to None. Give that a go

Lalene · May 20, 2016

Djm3006 wrote: »

the only other thing I can think of that I have done is pin the header, log on to SM > Customize > entire site > Layout (right hand side)>Section (down the bottom) set to None. Give that a go

Still moves

This is quite a mistery

Djm3006 · May 21, 2016

Lalene wrote: »

Still moves This is quite a mistery

Morning, Just looking on your mobile site (iPhone 6) hamburger does not move on home page, no Hamburger menu on Bio,galleries, prints page yes and does not move, Q: did you put the CSS on entire site under customize? or just home page

Lalene · May 21, 2016

Djm3006 wrote: »

Morning, Just looking on your mobile site (iPhone 6) hamburger does not move on home page, no Hamburger menu on Bio,galleries, prints page yes and does not move, Q: did you put the CSS on entire site under customize? or just home page

I have one HM on the homepage that does not move. Then I tested a HM on the Prints page, so if it worked, i could copy the code to the rest of the pages.

My homepage is independent and different from the others, so I figured that whatever was working on my homepage was not working on the other pages.

I put the CSS code you and others gave me on the Prints page only. Its good to hear that the HM on the Prints page is not moving on your Iphone. Thats a good sign; however, its a different story for my Samsung S3 mini.

Ill try an emulator to see how it behaves with other phones.

Thanks a lot.

Modify "Menu" box on mobile view

Comments