Left aligning <ul> in mega menu using Trade theme.

Store Design
, ,
1

I’m using a split-into-columns

    in my mega-menu and trying to left Align it to the same horizontal position as my logo above and products below but nothing is working. If the
      has no set width then it aligns perfectly but there’s too much distance between the columns (it’s not a column-gap issue, I want them bunched up on the left). If I set a fixed width then the spacing is right but the whole
        is center aligned. floating left isn’t a solution I can make work because it’s too far left and adding padding or margins means it doesn’t stay in the correct position when changing resolutions or zooming in etc. Can anyone help me left align the
2

Hello @Randal

Can you please share the actual screenshot how you want to make it ?

So i can check and suggest you to make changes according to that.

3

likeThis.jpg
likeThis.jpg1562×507 57.7 KB

4

all you want is to show the submenu links aligned with the logo vertically right ?

5

No, I want the sub menu links (the 1px red box) to be aligned to the left like it is in the picture, currently its horizontally center aligned.

6

Hello @Randal , Please let me know you want like the screenshot below?

dws_pvt_ltd_0-1723097219514.png
dws_pvt_ltd_0-1723097219514.png1832×892 76.3 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

7

No, I don’t want it fully left, I want it left inline with the rest of the site. The picture below shows exactly what I want.

likeThis2.jpg
likeThis2.jpg1920×2000 198 KB

8

Hello @Randal , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS/Section CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.mega-menu[open] .mega-menu__content ul.mega-menu__list.page-width.mega-menu__list--condensed {
    margin-left: 0;
    padding: 0 0 0 7px;
    right: 0 !important;
}

See the screenshot below,

Screenshot from 2024-08-09 09-48-08.png
Screenshot from 2024-08-09 09-48-08.png1829×963 76 KB

Screenshot from 2024-08-09 09-48-13.png
Screenshot from 2024-08-09 09-48-13.png1829×963 151 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

9

This wasn’t right but it has now been solved anyway. Thanks for your help!