How can I prevent my website menu from wrapping on smaller screens?

Store Design
1

Hello All!

I’ve been struggling with this issue for some time now. The header menu on my Turbo Theme webpage keeps wrapping on smaller screens. Is there any way I can keep this from happening? The website looks so nice from my desktop screen, but for some reason on smaller laptop screens it seems to be wrapping down into 2 lines.

Is there anyway to make the menu a “fixed design”?

I’ve attached a photo serving as an example of the problem I’m encountering. That “More” button should be in line with the menu buttons on the left-hand side.

Thanks!

menuwrapproblem.png
menuwrapproblem.png1920×677 148 KB

2

Hello There,
Please share your store URL.
So that I will check and let you know the exact solution here.

3

Hi,my store url is www.popfun.com. Thank you for the help!

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 1360px){
    .logo-position--center.search-enabled--true .nav--right ul.menu.align_left li {
        padding-right: 10px;
    }
    .logo-position--center.search-enabled--true .nav--right ul.menu.align_left {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
5

Hey there! Thanks so much for the reply. That particular file doesn’t exist in my Assets. I tried plugging the code into both styles.css and theme.liquid, but it didn’t work.