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

net1994net1994 Registered Users Posts: 269 Major grins

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?

Candy For Your Eyes @ Paint By Pixels

http://www.paintbypixels.com

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • net1994net1994 Registered Users Posts: 269 Major grins

    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.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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);}
    
  • net1994net1994 Registered Users Posts: 269 Major grins

    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?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

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

  • net1994net1994 Registered Users Posts: 269 Major grins
    edited January 23, 2019

    @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

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;
    }
    
  • net1994net1994 Registered Users Posts: 269 Major grins
    edited January 24, 2019

    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 ")

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited January 24, 2019

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

  • net1994net1994 Registered Users Posts: 269 Major grins

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

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • net1994net1994 Registered Users Posts: 269 Major grins
    edited January 27, 2019

    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.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

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

    .sm-page-widget-nav .sm-page-widget-nav-mobile {
        width: 38.75%;
    }
    
  • net1994net1994 Registered Users Posts: 269 Major grins

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

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

    No dice.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • net1994net1994 Registered Users Posts: 269 Major grins

    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.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • net1994net1994 Registered Users Posts: 269 Major grins

    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!

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
Sign In or Register to comment.