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

[Randal]

I'm using a split-into-columns <ul> 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 <ul> 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 <ul> 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 <ul> feels like it should be so easy but I've hit a brick wall. Thanks.

https://4330ea-89.myshopify.com/

[parth_ghelani]

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.

[Randal]

 

[parth_ghelani]

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

[Randal]

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.

[dws_pvt_ltd]

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

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

[Randal]

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.

 

[dws_pvt_ltd · Accepted solution]

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,

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

[Randal]

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