Mobile Display for 'Menu' and Instagram icon

ksteryousksteryous Registered Users Posts: 5 Big grins
edited February 4, 2016 in SmugMug Customization
Good evening...

I've recently done a design refresh on my website, and for the most part have things the way I want them on the desktop version. However, for the mobile version I have two questions.
1. Is there a way to make the Instagram icon appear at the bottom?
2. And also is there any way to change how the 'Menu' is displayed. You can see that it is currently showing up as a black bar that stretches across the screen and obscures the main page.

Website is www.steryousphotography.com

I've included a pic just to make it easy...

Thanks,
Kenton
23986435900_27f419fd68_z.jpg

Comments

  • SPORTDADSPORTDAD Registered Users Posts: 22 Big grins
    edited February 3, 2016
    Kenton,

    I just spent the past few days redesigning my website and ran into the exact same requirement you ask about. The smug mug.com website has a small menu icon on their mobile site, however smug mug.com was not built using the same customizer that Smugmug's customers use.

    I was told just now by Smugmug to check this site for advice. If you find the answer, please let me know. I will do the same for you.

    Jeff Vogan
    SPORTDAD Sports Photography
    www.sportdad.ca
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited February 3, 2016
    Hi :)

    You would have to use some CSS to move your instagram-icon further down...
    Let me see...this should do the trick, I think:
    @media only screen and (max-height: 500px) {
        .sm-page-widget-social-links .sm-fonticon{
             margin-top: 200px !important;
        }
    }
    @media only screen and (min-height: 501px )  and (max-height: 640px){
        .sm-page-widget-social-links .sm-fonticon{
             margin-top: 350px !important;
        }
    }
    

    For your menu, well you could change the color of that bar, either going completely transparent or choosing a different a little less "heavy" color with this kind of CSS:
    .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header{
    background-color: transparent !important; 
    /* then you'll get no color but a transparent background. if you want a color you could specify one by using rgba(red_value, green_value, blue_value, alpha value), where the alpha_value would define the opacity between 0 and 1 and the red_- green_- and blue_value would have to be specified between 0 and 255), instead of the "transparent"-keyword*/
    }
    

    Good luck

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • pilotdavepilotdave Registered Users Posts: 785 Major grins
    edited February 3, 2016
    ksteryous wrote: »
    Good evening...

    I've recently done a design refresh on my website, and for the most part have things the way I want them on the desktop version. However, for the mobile version I have two questions.
    1. Is there a way to make the Instagram icon appear at the bottom?
    2. And also is there any way to change how the 'Menu' is displayed. You can see that it is currently showing up as a black bar that stretches across the screen and obscures the main page.

    Website is www.steryousphotography.com

    I've included a pic just to make it easy...

    Thanks,
    Kenton

    I'd suggest turning off "collapse for mobile" in the menu settings:

    i-mWW74dh.png

    Since there's nothing else on your homepage, there's no reason to make visitors take the extra step of pressing the menu button.

    Dave
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited February 4, 2016
    That menu block has always bothered me some... from the standpoint of a visitor, when I first viewed it, I had no idea I could do something to it, like touch it and go somewhere. This might be my idiot mind, but it looked like a clunker of a rock, or like a broken code something. As if the menu *should* have been visible, but wasn't...

    I don't know what options there are for seriously re-vamping it, but at least I have this, to adapt the color and border:
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
    box-shadow: 0px 0px 6px 0px #000000;
    background-color: transparent;
        }
    

    I believe one can also change the text inside, but I haven't figure that out. So Menu might be replaced with "Click Here for Menu"? I think...
Sign In or Register to comment.