Solved

Add a multi-column single menu Reformation.

Danielparsons
Pathfinder
117 0 13

Hi All,

 

My mega menu on desktop has overlapped and the font size if different to other menu drop downs, any help appreciated.

 

URL: https://label-source.co.uk/

Thank you,

Screenshot 2023-03-10 at 14.14.27.png

DSP
Accepted Solution (1)

PageFly-Richard
Shopify Partner
4668 1069 1727

This is an accepted solution.

Hi @Danielparsons ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/app.css->paste below code at the bottom of the file:

@media screen and (min-width: 1068px) {
    .thb-full-menu li.menu-item-has-children {
        position: static;
    }
    .thb-full-menu .sub-menu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .thb-full-menu .sub-menu li {
        width: 20% !important;
    }

}

PageFlyRichard_0-1678458840719.png

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 5 (5)

PageFly-Richard
Shopify Partner
4668 1069 1727

This is an accepted solution.

Hi @Danielparsons ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/app.css->paste below code at the bottom of the file:

@media screen and (min-width: 1068px) {
    .thb-full-menu li.menu-item-has-children {
        position: static;
    }
    .thb-full-menu .sub-menu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .thb-full-menu .sub-menu li {
        width: 20% !important;
    }

}

PageFlyRichard_0-1678458840719.png

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Danielparsons
Pathfinder
117 0 13

Hi Pagefly,

 

I have noticed an issue with this menu. When you click on a category the menu changes to the below. Please help, thank you.

 

Screenshot 2023-03-13 at 09.53.05.png

DSP
PageFly-Richard
Shopify Partner
4668 1069 1727

Hi @Danielparsons ,

 

I did not check this error. Looks like you already have the solution, right?

PageFlyRichard_0-1678881874144.png

 

Let me know if you have any questions

Best regards,

Richard | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

floweractually
Excursionist
27 0 6

I have the same problem and I would like to change it into multi-columns single menu. Each column should have 8 collections as long as it looks neat and tidy. Can you please help me with this ? I am using Dawn 11.0. Many thanks
螢幕截圖 2023-10-08 上午1.26.06.png

ShopOwner28
Excursionist
16 0 13

Is there a way to add a divider. Or sub headings like the attached. 

mega menu with sidebar with items revealed in a horizontal direction.png