Automatically showing mobile header on small screen PC

[DahmaneOuafi]

Good evening, 

I'm developping a shop (zest theme) with a mega menu and noticed that on small resolution computer (here 1366x768px) I can't properly use the mega menu : the first section will automatically close itself and open the one underneath if I try to navigate.

To fix this I would like to modify the CSS in order to show the mobile header on computer with a width under 1500px. Could you help me to find where I can modify this? 

Thanks

[Alex-A13]

Hi @DahmaneOuafi 

For editing the code:
Look for files named theme.css, theme.scss.liquid, or something similar in the Assets folder. The mobile and desktop menu styles are often located here.
At the bottom of the CSS file, add a media query to adjust the menu behavior on smaller screens. The following code will display the mobile header on screens up to 1500px wide:
@media (max-width: 1500px) {
.desktop-header {
display: none;
}
.mobile-header {
display: block;
}
}

Replace .desktop-header and .mobile-header with the actual class names used for the desktop and mobile headers in the Zest theme.
Hope that helps! If you find this useful please don't forget to hit the thumbs up icon!! Thank youu