Reduce gap between menu items column no stacking

[EFW24]

I want to reduce the gap between the menu items. I have tried adding multiple quotes at the base.CSS file but nothing changes. This is a custom theme that I bought.

I also want to add more than five menu items but it’s getting stacked

kindly help

[BSSCommerce-HDL]

Hi @EFW24 , 
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[EFW24]

I have not posted the website yet

[BSSCommerce-HDL]

Hi @EFW24 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css,  theme.css or styles.css

Step 3: Insert the below code at the bottom of the file -> Save

@media only screen and (max-width: 990px) {
.list-menu--inline {
    display: inline-flex;
    flex-wrap: nowrap !important;
}

.header__menu-item {
   padding: 1.2rem 13px !important;
}

}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[EFW24]

It’s still not working on my end for some reason

[BSSCommerce-HDL · Accepted solution]

Oh sorry, pls try again with this code: 

@media only screen and (min-width: 990px) {
.list-menu--inline {
    display: inline-flex;
    flex-wrap: nowrap !important;
}

.header__menu-item {
   padding: 1.2rem 13px !important;
}

}

[EFW24]

IT DID!! Thanks alot

i have been searching for hours! 😃

[Made4uo-Ribe]

Hi @EFW24 

Would you mind to share your store URL? Thanks!

[EFW24]

I haven’t posted it yet here is the preview link

https://803qibe4pl17tb13-86892249381.shopifypreview.com

I am facing problem in the menu of the desktop version