Can you reduce the width of the Menu bottom on mobile devices?

net1994

The menu button showing up on mobile devices is cutting off parts of great pics. Is there a way to reduce the width, perhaps with some CSS code?

Hikin' Mike

.sm-page-widget-nav .sm-page-widget-nav-mobile {
  width: 50%;
  margin: auto;
}

Hikin' Mike

You might want to look into using a hamburger menu: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Hamburger-Menu

net1994

Thanks Mike. I'll check it out more in-depth later. I did add the code to move my logo to the top left, which solves a lot of other problems I had. But I don't like the hamburger icon. I was hoping I could just have the 'Menu' button back, then it would drop down with the dark gray menu with the light gray text for the links.

Hikin' Mike

@net1994 said:
Thanks Mike. I'll check it out more in-depth later. I did add the code to move my logo to the top left, which solves a lot of other problems I had. But I don't like the hamburger icon. I was hoping I could just have the 'Menu' button back, then it would drop down with the dark gray menu with the light gray text for the links.

Just remove this part:

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

Hikin' Mike

On the other thread where you accidentally deleted the background (.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background-color: rgba(44,46,49, 0.85);}). You can add this to it:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile.sm-page-widget-nav-mobile-items-visible {background-color: rgba(44,46,49, 0.85);}

net1994

Thanks Mike! That did it. Now is it possible to move the text 'Menu' right below my logo which is on the top left of my page on mobile? And also, can I change the font size of the text 'Menu' so it stands out somewhat more?

Hikin' Mike

Since you're not taking advantage of the "Hamburger Menu", I suggest removing that code. Having the 'Menu' text under your logo kind of defeats the purpose of using the 'Hamburger Menu'.

net1994

@Hikin' Mike said:
Since you're not taking advantage of the "Hamburger Menu", I suggest removing that code. Having the 'Menu' text under your logo kind of defeats the purpose of using the 'Hamburger Menu'.

Done. Thanks again. And also made the menu button 'thinner.' Though is there a way to move my logo and the menu button to the top left of the page on mobile? Lets say the logo is there and then the menu button is right below it without any space in between. This would be awesome as then there are some pics I can put back into the slide show. A few great pics were obscured by the wider menu button and it's location :-(

And if I can get greedy, is there a way on mobile for when the menu drops down, it has the separator lines like my desktop homepage? I think you helped me out with that code. So for links it would be: Home/line/ Featured Work, Destinations Afar, Mixed Bag/line/the rest

Hikin' Mike

First, find this:

@media only screen and ( max-width: 736px ) {

  .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}

  .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {display: none !important;}

  .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}

  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}

}

Use this instead. That just adds the 'no space' code for mobile.

@media only screen and ( max-width: 736px ) {

  .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}

  .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {display: none !important;}

  .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}

  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}

  .sm-user-ui .sm-page-widget .sm-page-widget-content {padding: 0 !important;}

}

Now for the dropdowns. Find this:

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(1),
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(4) {
  padding-bottom: 20px;
  border-bottom: 1px solid gray;
}

Use this instead. The original code was too selective. This one will add the lines for both desktop and mobile. It also needed the !important for mobile.

.sm-page-widget-nav .sm-page-widget-nav-toplink:nth-child(1), 
.sm-page-widget-nav .sm-page-widget-nav-toplink:nth-child(4) {
  padding-bottom: 20px;
  border-bottom: 1px solid gray !important;
}

net1994

Changes made. The lines in the menu on mobile are there, great. However around the logo and menu box is the dark grey transparent overlay, that shows on top of the photo. See below Is there a way to make that area transparent, or remove it altogether. I was also hoping to get the logo and menu bar in the top left on the page in mobile. You should send me an invoice for all this by the way.

![](https://us.v-cdn.net/6029383/uploads/editor/4k/6rypuuc5rm95.jpg ")

Hikin' Mike

No, changes were duplicated. You somehow added the gray overlay in one of your CSS blocks. Remove this:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
    background-color: rgba(44,46,49,0.85);
}

You also duplicated this in one of your CSS blocks. Remove it and put it in your theme's custom CSS like it should be.

@media only screen and ( max-width: 736px ) {

  .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}

  .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {display: none !important;}

  .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}

  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}

  .sm-user-ui .sm-page-widget .sm-page-widget-content {padding: 0 !important;}

}

Once this is done, I'll post the logo/menu to the left code (which I forgot about).

net1994

@Hikin' Mike said:
No, changes were duplicated. You somehow added the gray overlay in one of your CSS blocks. Remove this:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
    background-color: rgba(44,46,49,0.85);
}

You also duplicated this in one of your CSS blocks. Remove it and put it in your theme's custom CSS like it should be.

@media only screen and ( max-width: 736px ) {

  .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}

  .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {display: none !important;}

  .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}

  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}

  .sm-user-ui .sm-page-widget .sm-page-widget-content {padding: 0 !important;}

}

Once this is done, I'll post the logo/menu to the left code (which I forgot about).

Thanks Mike! Could you impart the code to get my logo & menu drop down bar to the upper left of the site? And I would think the values that put it in the upper right could be changed to move it to the upper right?

Also, why is there a Theme section for CSS as well as the main site CSS? It seems like for most/all of the mobile stuff, I have to put it in the theme CSS. Why not put it all in one place?

Hikin' Mike

Add this to your theme's CSS custom section:

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

Find this in your CSS:

.sm-page-widget-nav .sm-page-widget-nav-mobile {
  width: 50%;
  margin: auto;
}

REMOVE the margin: auto;

Why there is two locations to add CSS? There are several ways to add CSS. I prefer adding it to my theme's CSS. It is easier for me to look a somebody else's CSS and find/edit it using one of the webs tools if they are located in the theme's section. It's difficult for me to find/edit in other locations.

net1994

Thanks again Mike. That did it! Is there a way to get the logo and menu box right up on the edge of the mobile browser window? There is a thin column of a few pixels preventing it to be on the edge. See pic below.

Hikin' Mike

Try adding margin-top: -4px; to this:

.sm-page-widget-nav .sm-page-widget-nav-mobile {
    width: 38.75%;
}

net1994

@Hikin' Mike said:
Try adding margin-top: -4px; to this:

.sm-page-widget-nav .sm-page-widget-nav-mobile {
    width: 38.75%;
}

No dice.

Hikin' Mike

Looks fine to me.

net1994

Sorry, I should of been more specific. I mean from the left side of the logo, there is a space where you can see a sliver of the picture and this goes a little bit to the edge of the screen. I want the left side of the logo and the menu button to be right on the edge, without being able to see any of the back round image. See below.

Also, what device are you looking at the site on? For your screenshot, the menu button is at the normal width. I set it well below this to align with the width of the logo.

Hikin' Mike

Add this:

@media only screen and ( max-width: 736px ) {

  .sm-user-ui .sm-page-widget .sm-page-widget-content {margin:0 !important;}

} 

I don't own a mobile device, so I resize my monitor.

net1994

Thanks again Mike! I think I'm done with the mobile side of things. For now....

Now on to obsess about something else on my site!