How can I align dropdown items to the left in CSS navigation menu?

Store Design
, , ,
1

Hi everyone,

I recently applied a CSS code to center the main menu on my site: www.lucentdecors.com , using the Warehouse theme by Maestroo. However, when you hover over the main menu items, the sub-items are also centered, which doesn’t look right. See the screenshot below for reference.

I would like to align left the dropdown items on my desktop navigation menu.

Please could someone help?

Many thanks

Elliot

elliotmch_0-1675437722646.png
elliotmch_0-1675437722646.png1920×992 304 KB

2

Hi [email removed]Elliotmch,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-card.css.

Step 3: Paste the below code at bottom of the file → Save

.mega-menu__column:has(>.mega-menu__linklist){
        text-align:left !important

}

PageFlyVictor_0-1675438584696.png
PageFlyVictor_0-1675438584696.png3152×710 191 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

Thank you so much Victor, it worked perfectly.

Have a great weekend.

Kind regards,

Elliot

4

You are welcome. I’m glad when I can help you :heart_eyes: