Reply To: The main menu looks bad on mobile

[Zex]

Hello, Arandino!

You are right,we are redesigned the header in the mobile view, and now the Logo and menu are in the same line (we wanted to save the space). If you want to have mobile menu below your logo (as it was earlier), you need to insert following codes into Customizing->General->Additional CSS:

/*Hamburger menu center*/
@media screen and (max-width: 560px){
#masthead .pull-left,
.mobile-menu-icons{
display:flex!important;
float: none!important;
justify-content: center!important;
position: relative;
margin-bottom: 20p
}
.mobile-menu-icons{
top:20px!important;
min-height: 30px!important;
    width: 100%!important;
}
 .mobile-menu.collapse{
    top:150px!important;
 }
}
nav.mobile-menu {
    max-height: 100%!important;
}

To change the color of the Hamburger menu and turn off the animations, insert additionally following codes:

/*Hamburger menu color*/
.mobile-menu-toggle-inner, 
.mobile-menu-toggle-inner::before, 
.mobile-menu-toggle-inner::after {
    background-color: black!important;    
}
/*Turn off the hamburger menu open/close animation*/
.toggle--elastic .mobile-menu-toggle-inner::before,
.toggle--elastic.is-active .mobile-menu-toggle-inner::after,
.toggle--elastic .mobile-menu-toggle-inner::after{
    transition:none!important;
}

Let me know if you need anything else.

Regards