How do I change mobile menu breakpoint with CSS?

Hi @henriksandberg ,

Thank you for reaching out. Unfortunately, this theme does not have native support for this (although it would be nice to be able to change the mobile breakpoints with an option in the theme settings). As you suggested, what you can do at the moment is to add additional css code. Something like this should do the job, although you might need to adjust it a bit to cover all specific scenarios (add it in appearance => customize):

@media (max-width: 65em){
     .slide-menu {
         position: fixed;
         top: 0;
         left: 100%;
         right: 0;
         line-height: 2em;
         bottom: 0;
         opacity: 0;
         z-index: 9999;
         color: #ffffff;
         -webkit-transition: 0.4s ease-out all;
         transition: 0.4s ease-out all;
         overflow: auto;
    }
     .toggled .slide-menu {
         pointer-events: auto;
         left: 0;
         bottom: 0;
         opacity: 1;
         z-index: 2;
         display: -webkit-box;
         display: flex;
         height: 100%;
    }
     .slide-menu {
         background-color: #066664;
    }
}
 @media (max-width: 65em){
     #primary-menu {
         position: absolute;
         top: 25%;
         width: 100%;
         padding: 2em;
         margin-left: 0;
         display: -webkit-box;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         flex-direction: column;
         line-height: 36px;
    }
}
 @media (max-width: 65em){
     .main-navigation {
         position: absolute;
         right: 16px;
         top: 20px;
    }
     .menu-toggle {
         border: none;
         position: relative;
         z-index: 999;
         background-color: transparent;
    }
}
 @media (min-width: 40em) and (max-width: 65em){
     .menu-toggle {
         display: block !important;
    }
     .main-navigation {
         width: auto !important;
    }
}

@henriksandberg , I am glad the issue was resolved. Cheers!