How to make dropdown menus of different widths?

Solved

How to make dropdown menus of different widths?

nahuel_123
Excursionist
16 0 2

nahuel_123_0-1737398190052.png

nahuel_123_1-1737398207101.png

I have these two dropdown menus on my store that open when you hoover over them. I had to force the width to 208px to make sure all the content is on one line, but that makes the second dropdown too big (there is a big white space on the right I don't like). 
Is there a way where I can designate these two menus differently and assign them their own width? Or another solution?


My website is jajamoon.com and I have this custom CSS code:

ul.list-menu.list-menu--inline span {
font-size: 13px;
}
.header {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.mega-menu {
position: relative !important;
}
.mega-menu[open] .mega-menu__content {
width: 208px;
}
.header__submenu .header__menu-item {
justify-content: flex-end;
text-align: left;
}

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9875 2353 2950

This is an accepted solution.

Hi @nahuel_123 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

/* DIY ACCESSORIES */
div#MegaMenu-Content-3 {
    width:185px !important;
}
/* DIY BAG */
div#MegaMenu-Content-2 {
     width:220px !important;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1737409245777.pngMade4uoRibe_1-1737409255691.png

     

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 3 (3)

hammadCodes
Shopify Partner
35 7 4

Please share your shop URL. I can help you 

Want to modify or custom changes to the Shopify store? Contact at
Email: contact.ecomvita@gmail.com , Skype: hammad00033 , Webiste: https://hammadCodes.com/
If helpful then please like and accept the solution to help others as well.
Shopify Expert | Founder & CEO --- eComVita
nahuel_123
Excursionist
16 0 2

Thank you: jajamoon.com

 

 

Made4uo-Ribe
Shopify Partner
9875 2353 2950

This is an accepted solution.

Hi @nahuel_123 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

/* DIY ACCESSORIES */
div#MegaMenu-Content-3 {
    width:185px !important;
}
/* DIY BAG */
div#MegaMenu-Content-2 {
     width:220px !important;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1737409245777.pngMade4uoRibe_1-1737409255691.png

     

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.