Re: Keep a menu item in a single line instead of two lines

Solved

Keep a menu item in a single line instead of two lines

armandorangel
Shopify Partner
4 0 1

On my menu, when dropdown, a menu item is split into 2 lines. I'd like to keep it in a single line. Maybe decreasing the font size or making the box container bigger. (See image attached)

 

Xnip2023-03-22_20-02-28.jpg

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1785 3101

This is an accepted solution.

Hi @Armandorangel,

 

You can try this code by following these steps: 

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

Step 2: Search file component-list-menu.css

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

@media(min-width:767px){
.list-menu--disclosure{
width:23rem !important
}
}

PageFlyVictor_0-1679540183978.png

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

View solution in original post

Replies 8 (8)

made4Uo
Shopify Partner
3851 717 1195

Hi @armandorangel,

 

Can you share you website so we can provide a code specific for you?

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

GemPages
Shopify Partner
5625 1261 1243

Hello @armandorangel ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1679535131657.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1679535148663.png

<style>
#top-menu li li a {
    padding: 6px 5px;
    width: 100% !important;
}
.nav li ul.sub-menu {
    width: 300px;
}
#top-menu li li {
    width: 100%;
}
</style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
armandorangel
Shopify Partner
4 0 1

Didn't work 😞

Dan-From-Ryviu
Shopify Partner
9668 1935 1970

Hi @armandorangel

Go to Online store > Themes > Edit code > Assets > base.css, add this code at the bottom of file and click Save 

.list-menu--disclosure { width: max-content !important; }

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
9668 1935 1970

Hi @armandorangel,

 

Please add this code at the bottom of base.css code of your file, click Save button 

.list-menu--disclosure { width: max-content !important; }

Here is the result Screenshot 2023-03-23 at 14.02.22.png

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PageFly-Victor
Shopify Partner
7865 1785 3101

This is an accepted solution.

Hi @Armandorangel,

 

You can try this code by following these steps: 

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

Step 2: Search file component-list-menu.css

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

@media(min-width:767px){
.list-menu--disclosure{
width:23rem !important
}
}

PageFlyVictor_0-1679540183978.png

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

infoatcodelab7
Shopify Partner
593 141 154

@armandorangel 

Step1: Go to online store -> Edit code

Step2: Search base.css file

Step3: Paste below code bottom of the css file -> save

 

.header__menu-item.list-menu__item.link.link--text.focus-inset.caption-large {
  width: 24rem !important;
}

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com