Increase the space in the submenu

Solved

Increase the space in the submenu

Astrid_brae
Shopify Partner
17 0 4

I'd like to increase the space in the sub-menu (as in the general menu) and place the menu in the centre., like in the image : 
Obviously on a computer, on a phone this is ok.

submenu.JPG

Accepted Solution (1)
techlyser_web
Shopify Partner
1794 332 358

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .px-section-horizontal-spacing ul.justify-start {
      justify-content: center !important;
      gap: 52px !important; /*adjust according to you*/ 
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 8 (8)

dws_pvt_ltd
Shopify Partner
28 7 7

Hello @Astrid_brae 

 

Please share the store URL.

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

BSSCommerce-HDL
Shopify Partner
1052 358 428

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

BSSCommerceHDL_0-1718704119863.png

 

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

BSSCommerceHDL_1-1718704127505.png

 

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

 

nav div[id^="menu"] ul {
    justify-content: space-around !important;
}

 

Here is result: 

BSSCommerceHDL_2-1718704165077.png

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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Astrid_brae
Shopify Partner
17 0 4

Hi,

 

I don't have base.css, theme.css, styles.css or theme.scss.liquid I have "base.bundle.css" 

Can I put this code here ? 

Thanks

BSSCommerce-HDL
Shopify Partner
1052 358 428

Hi @Astrid_brae, You can try to add this CSS code to bottom of 'base.bundle.css' file. Hope this can help you 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

techlyser_web
Shopify Partner
1794 332 358

Hello @Astrid_brae 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Astrid_brae
Shopify Partner
17 0 4

Off course :

 

www.daure.com

and password : julix 

techlyser_web
Shopify Partner
1794 332 358

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .px-section-horizontal-spacing ul.justify-start {
      justify-content: center !important;
      gap: 52px !important; /*adjust according to you*/ 
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Astrid_brae
Shopify Partner
17 0 4

Thank you very much for your help !! 🙂