The main menu looks bad on mobile

[Arandino]

The main menu looks bad on mobile, this error has suddenly appeared, it may be due to the last update. Before it looked good.

[Arandino]

This reply has been marked as private.

[Arandino]

The menu icon now looks yellow, an x comes out, the menu doesn’t open well, and it doesn’t look like before.

[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

[Arandino]

It is still not the same as before. Before, the dropdown was not in the center. The subpages, products and courses of the menu do not open.

[Zex]

Hi,

If you don’t want it centered, remove this part from your previously added custom CSS code:

/*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;
 }
}

https://prnt.sc/sl3pt0

Also I see you still have the open/close animations.
Please replace the code I gave you earlier with the next one:

/*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,
.mobile-menu-toggle-inner{
    transition:none!important;  
}

As for the submenu on the mobile view problem,
There is a small conflict with the Gold Addons Plugin, so if you want to use the Gold Addons plugin with the theme, you need to insert the following code into Customizing->general->Additional CSS:

/*Gold addons conflict fix*/
.collapse.in {
    display: block!important;
}

Regards

[Arandino]

ok, thanks

[Author]

Posts