Header Menu on Two Lines between 900px and 1300px

Store Design
1

Hey everyone, I’ve been working on a custom shopify theme over the last few weeks but there is one thing I really cannot figure out… whenever I make the window size smaller (approx between 900px and 1300px width) the header menu is over two lines instead of staying on one and menu items do not shrink…

Does anyone have an idea on how to fix this issue? The website url is : femininerevival.com

Any feedback is greatly appreciated!

Thanks,

BSS

2

Hi @bss98 , you can solve it by adding this CSS code at the bottom of your base.css file

@media screen and (min-width: 990px) and (min-width: 1300px) {
.header__menu-item {
padding: 1.9rem !important;
font-size: 14px !important;
}
}
3

Hello @bss98

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.list-menu--inline {
    flex-wrap: nowrap !important;
}
4

Thanks for the prompt answer! I guess you meant (max-width: 1300px). I applied that and it worked, thanks again.