Adjust Padding/Margins Of The Mega Menu Imagine In Avenue Theme

Store Design
, , , ,
1

Hello!

I can’t seem to find where the CSS file for the mega menu image is located and there aren’t any options in the theme to adjust the margins or padding.

I’d like to not have any space surrounding the image in the mega menu. I’ve attached an image below of what I’m talking about. If anyone could guide me in the right direction, I would super appreciative.

URL: www.alchemistcarcare.com

Thank you very much!

Screenshot.jpg
Screenshot.jpg3671×1881 382 KB

1 Like
2

Can you provide preview link to your site? The site is currently password protected

3

Hi @AlchemistCC

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • 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.parent-level-ul.mega.text-left {
    padding-left: 0px !important;
}
span.three.left {
    padding-top: 0px !important;
}

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

1 Like
4

This is great! Thank you very much.

I forgot to include removing the gap at the bottom of the picture. Would you mind helping me with that as well? Setting the padding-bottom to 0px doesn’t do anything. Using negative margins works, but then a scroll bar appears for no reasons and I’d rather not have that,

Thank you so much for your help!

1 Like
5

Check this one.

Same instruction.

img.nopad.js.lazyload.img-align.square {
    margin: 0px !important;
}

And Save.

Result:

Made4uoRibe_0-1701016989210.png
Made4uoRibe_0-1701016989210.png1348×445 183 KB

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

1 Like
6

This worked perfectly!

You’re amazing, thank you so much!