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

KarlsbergKarlsberg Registered Users Posts: 7 Big grins
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 !
Tagged:

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 11, 2020

    @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;
      }
    
    }
    
  • KarlsbergKarlsberg Registered Users Posts: 7 Big grins
    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 !
Sign In or Register to comment.