different layout for menu on mobile

alexsavu

Hey

This is my website I'm currently working on: https://www.alexsavu.com. I have a menu on my home page that I would like to have a different layout on mobile. This is my CSS code for it:


.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
padding-right: 5%;
padding-left: 5%;
line-height: 76px;
}

.sm-user-ui .sm-page-layout-region-center .sm-page-widget-nav-toplink a {
color: #ffffff;
#font-size: 62px;
font-size: 300%;
letter-spacing: 12px;
text-shadow: 4px 3px rgba(0,0,0,0.1);
}

.sm-page-widget-nav .sm-page-widget-nav-mobile-items-visible .sm-page-widget-nav-items {
color: #ffffff;
font-size: 100%;
letter-spacing: 12px;
text-shadow: 4px 3px rgba(0,0,0,0.1);
}

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #dcdcdc;
}

.sm-user-ui .sm-page-widget-nav-toplink a {
-webkit-transition: all 0.2s ease-in;
transition: all .2 ease-in;
}

As you can see, besides the mobile part, what it basically does is some padding, some basic color and sizing for the text and effect for the hover. What I would want to achieve is have a vertical layout on mobile (in my case it is vertical just because the screen is not wide enough) and have it centered (picture attached). this would most likely eliminate the bottom scroll bar as well. I'm just not sure which objects I can use in the CSS code to manipulate the menu (or navigation bar. not sure how it's called). I hoped that smugmug would automatically take care of it and make the whole website mobile friendly.
I know about this post https://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations but here it only shows which tags to use to make specific customizations for different screens. I only really want to have the same thing as I already have on big screens.
Any help would be really appreciated. Thanks.

Hikin' Mike

If I understand your question, you want the menu text to get smaller when you switch to smaller devices, correct? Remove that code and use this:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
  padding-right: 5%;
  padding-left: 5%;
  line-height: 76px;
}

.sm-user-ui .sm-page-layout-region-center .sm-page-widget-nav-toplink a {
  color: #fff;
  font-size: 300%;
  letter-spacing: 12px;
  text-shadow: 4px 3px rgba( 0, 0, 0, 0.1 );
}

.sm-user-ui .sm-page-widget-nav-toplink a {
  -webkit-transition: all 0.2s ease-in;
          transition: all 0.2s ease-in;
}

.sm-user-ui .sm-page-widget-nav-toplink a:hover {color: #dcdcdc;}

@media ( max-width: 736px ) {

  .sm-user-ui .sm-page-layout-region-center .sm-page-widget-nav-toplink a {
    color: #dcdcdc;
    font-size: 100%;
  }

}

It's pretty much the same thing, but when the screen switches to 736px or smaller, the text gets smaller and changes the color. You can see that on the @media

alexsavu

Thanks for your swift answer @"Hikin' Mike" . Unfortunately I have already tried this option. My problem with it is that the colour on the text is always black. Even if I leave the colour field out from that section that is mobile specific. On the other hand changing the font size for mobile only works. So I'm inclined to think that font colour get overridden somehow. Moreover the menu is not centered. It's displayed in the lower half of the scree (you can see in the mobile screen shot I attached in my original message). I suspect this is because I'm not re-doing the layout for mobile specific but instead only making the font smaller so as to fit the screen. What I would like to do is set the layout style for the menu to vertical for mobile only. How would I be able to do that? Thank you

Hikin' Mike

The code I posted should work. I guess I don't understand your question.

alexsavu

@"Hikin' Mike" the code only shrinks the text. its color remains black no matter what hex code I use. moreover the code does not center the menu. in the screen print I attached it is quite visible. adding the mobile only bit does not improve it. what I was asking is if I can change the layout to vertical in the css code and have it only on mobile devices. the layout can be changed manually from the menu settings. I'm just asking if this can be done in code, dynamically, only on small screens. I hope this is more clear. Thank you

Hikin' Mike

,

Hikin' Mike

I thought you wanted the text to change color with mobile devices. My bad. This will shrink the nav text from 300% to 100% when the screen is 736px or smaller and the text color will be white.

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
  padding-right: 5%;
  padding-left: 5%;
  line-height: 76px;
}

.sm-user-ui .sm-page-widget-nav-toplink a,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:visited {
  color: #fff;
  font-size: 300%;
  letter-spacing: 12px;
  text-shadow: 4px 3px rgba( 0, 0, 0, 0.1 );
}

.sm-user-ui .sm-page-widget-nav-toplink a {
  -webkit-transition: all 0.2s ease-in;
          transition: all 0.2s ease-in;
}

.sm-user-ui .sm-page-widget-nav-toplink a:hover {color: #dcdcdc;}

@media ( max-width: 736px ) {

  .sm-user-ui .sm-page-widget-nav-toplink a,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a {font-size: 100%;}

}

alexsavu

Thank you for your patience @Hikin' Mike . This seems to work much better. Actually I had to combine my original code with the mobile only bit from your last comment. If I would copy the entire code from your last comment it would render one of the buttons with black and the other with white. Very strange behaviour. Thanks again