My menu on homepage can't be seen correctly on mobile

Karlsberg

Hello everyone !

When I want to see my site on a mobile the menu can't be seen correctly ( https://kellianbier.smugmug.com/ ) and at the moment I didn't find anything to fix this issue.
this the CSS code I use to display my menu :
.sm-page-widget-nav-toplink {
font-size:40px;
margin:0px !important;
padding: 0 190px 0 0px;
text-shadow: 4px 3px rgba(0,0,0,0.1);
}

I would love to have the same display as Chris Burkard on his site : https://www.chrisburkard.com/.

I'm a new user on this forum and you already helped me a lot with all the posts I found here... Thank's a lot !

Hikin' Mike

@Karlsberg said:
I would love to have the same display as Chris Burkard on his site : https://www.chrisburkard.com/.

As a starter, he disabled the mobile menu on the home page. You'll need two different menus, one for the home page and another for everything else. Remove your code and use this. This is for the home page, so just add that CSS to a CSS block on that page:

.sm-page-layout-region-bottom .sm-page-layout-row:nth-of-type(1) {display: none!important;}

.sm-user-ui .sm-page-layout-region-header {height: 0;}

.sm-user-ui .sm-page-layout-region-center .sm-page-widget-nav-toplink>a {
 letter-spacing: 12px;
 font-size: 3.1em;
 text-shadow: 4px 4px rgba(255,255,255,0.09);
}
.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%;
}
.sm-user-ui .sm-page-widget-28066445 .sm-page-widget-nav-toplink:nth-child(1) {padding-left: 2%!important;}

.sm-user-ui .sm-page-layout-region .sm-page-layout-region-center {
 display: flex;
 flex-direction: column;
 justify-content: center;
}

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

  .sm-user-ui .sm-page-layout-region div.sm-page-layout-region-center {
    display: flex !important;
    min-height: 85vh !important;
  }

}

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
 color: #efefef;
 -webkit-transition: all 0.15s ease-in;
         transition: all 0.15s ease-in;
}

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

@media only screen and (min-width: 765px) and (max-width: 1025px) {

  .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
    padding-right: 3%;
    padding-left: 3%;
  }
  .sm-user-ui .sm-page-widget-28066445 .sm-page-widget-nav-toplink:nth-child(1) {
    padding-left: 0!important;
  }

}

Karlsberg

Hello Mike, this works really great !
Thank's a lot for this code you already helped me a lot with previous post.

Greetings from France !