Reduce gap between menu items column no stacking

Technical Q&A
1

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

IMG_3688.jpeg
IMG_3688.jpeg2048×251 22.5 KB

kindly help

2

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.

3

Hi @EFW24

Would you mind to share your store URL? Thanks!

4

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

5

I have not posted the website yet

6

Hi @EFW24 ,

You can try this code by following these steps:

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

BSSTechVenture_2-1715962337130.png
BSSTechVenture_2-1715962337130.png1902×899 133 KB

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

BSSTechVenture_3-1715962344386.png
BSSTechVenture_3-1715962344386.png1916×934 101 KB

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:

BSSTechVenture_0-1715962234706.png
BSSTechVenture_0-1715962234706.png1487×796 142 KB

Hope this can help you,

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

7

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

8

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;
}

}
9

IT DID!! Thanks alot

i have been searching for hours! :smiley: