Is it possible to stop top navigation menu stacking on smaller screens?

Site URL: http://themushroom.pub

I'm having an issue with my website, on smaller screens (and zoomed in up to 150% on my screen) the top menu is stacking unattractively. The elements ('login' link, social icons and cart) end up behind the regular links (see fig 1) and the others jump about more than I'd like even when they're not overlapping (fig 2).

I've had a look on this forum and tried this solution:

@media screen and (max-width:1100px) {
.Header{
   display: none !important;
}
[data-nc-base="mobile-bar"] {
   display: block !important;
}
} 

But it doesn't seem to have done anything. I have also tried adjusting the padding between links and elements, but again, the header is behaving strangely on smaller screens. Is there a way to prevent this or, failing that, have it switch to the tablet mode (hamburger menu) earlier on the display constraint curve (it currently does it if you shrink the window down to about 1/2 its size or at 150% zoom)?

Thanks!

On 12/7/2020 at 11:32 PM, KaynaMushroom said:

Site URL: http://themushroom.pub

I'm having an issue with my website, on smaller screens (and zoomed in up to 150% on my screen) the top menu is stacking unattractively. The elements ('login' link, social icons and cart) end up behind the regular links (see fig 1) and the others jump about more than I'd like even when they're not overlapping (fig 2).

I've had a look on this forum and tried this solution:

@media screen and (max-width:1100px) {
.Header{
   display: none !important;
}
[data-nc-base="mobile-bar"] {
   display: block !important;
}
} 

But it doesn't seem to have done anything. I have also tried adjusting the padding between links and elements, but again, the header is behaving strangely on smaller screens. Is there a way to prevent this or, failing that, have it switch to the tablet mode (hamburger menu) earlier on the display constraint curve (it currently does it if you shrink the window down to about 1/2 its size or at 150% zoom)?

Thanks!

Your logo is big, better show the hamburger

@media only screen and (min-width: 768px) and (max-width: 1200px) {
        .header-burger {
          display: flex;
        }
        .header--menu-open .header-menu--folder-list {
          display: flex;
          opacity: 1;
          visibility: visible;
        }
        .header-display-desktop .user-accounts-link,
        .header-display-desktop .header-nav,
        .header-display-desktop .header-actions-action--social{
          display: none;
        }
}