How to reduce the margins to 0 in the dropdown menu

Shopify Discussion
1

Hello, I am trying to make the items in the dropdown menus take all the space available so each option doesn’t take two lines. Is there anyway to reduce the margins to near 0 so that the words are at the left of the dropdown menu and can go all the way to the right?

JAJAmoon_0-1733598476426.png
JAJAmoon_0-1733598476426.png1799×534 158 KB

my URL is jajamoon.com and the password is: skawts

Thank you!

If it helps, I currently have the current CSS custom to make the dropdown look how it is now (took it from other discussions):
ul.list-menu.list-menu–inline span {
font-size: 15px;
}
.header {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.mega-menu {
position: relative !important;
}
.mega-menu[open] .mega-menu__content {
width: relative;
}
.header__submenu .header__menu-item {
justify-content: flex-end;
text-align: left;
}

1 Like
2

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:
ul.mega-menu__list.page-width.mega-menu__list--condensed {
    padding: 0 12px !important;
}

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

1 Like
3

Thank you!

That worked. The only issue now is that there is quite a space at the top and bottom of the dropdown, is there a way to reduce it?

4

Add this one then.

Same instruction.

.mega-menu__content {
    padding: 10px 0;
}

And Save.

Result:

Made4uoRibe_0-1733608144958.png
Made4uoRibe_0-1733608144958.png438×315 44.8 KB

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

5

That didn’t seem to work, it still looks like before to me. I also tried adding the “!important” but didn’t work either.

6

Im bnot sure what are you trying to change here, as you said you like to remove the top and bottom space.

Please, compare my ss before and after.

Made4uoRibe_0-1733690678883.png
Made4uoRibe_0-1733690678883.png400×265 49.3 KB

This is only on the sides.

Made4uoRibe_2-1733690719179.png
Made4uoRibe_2-1733690719179.png357×272 6.23 KB

And currently what you have.

I hope you already see the difference.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Hi, the code provided before didn’t solve it but after playing around a bit I was able to reduce the margins by adding this line in bold to the code you first shared, in case it helps others:

ul.mega-menu__list.page-width.mega-menu__list–condensed {
padding: 0 12px !important;
margin: -20px 0 !important;
}