Change breakpoint for Menu style change

shaggyshaggy Registered Users Posts: 2 Beginner grinner
Hi

Got an issue with my site www. skycanvas.uk, look ok on mobile and desktop but when in landscape mode on ipad my navigation wraps and then spills over my logo. Anyway of

Is there any way to change the width so that my mobile menu appears? OR stop my text overlapping my logo and wrapping

Thanks

Steve

Comments

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

    While you can't edit the breakpoints to have the mobile nav come in sooner (make the screen bigger), you can edit them to ALLMOST look like the mobile. Add this to your theme's custom CSS section. If you don't know how, read my "Adding CSS" link below in my signature.

    Edit the max-width: 1024px to suit.

    @media screen and (max-width: 1024px) {
    
      .sm-page-layout .sm-page-layout-row .sm-page-layout-column {width: 100% !important;}
    
      .sm-page-widget-nav-horizontal,
      .sm-page-widget-logo .sm-page-widget-logo-align-left {
        text-align: center  !important;
        display: block  !important;
      }
    
      .sm-page-widget-25065590 .sm-page-widget-content,
      .sm-page-widget-25046768 .sm-page-widget-content {
        margin: 0 12px !important;
        padding: 12px 0 !important;
      }
    
    } 
    
  • shaggyshaggy Registered Users Posts: 2 Beginner grinner
    Lifesaver, worked first time and did exactly want I wanted

    Thanks!

    Steve
Sign In or Register to comment.