Mobile menu product categories & mega menu widget

Hello,
So first I have tried to set a mega menu widget to some show product categories, but on mobile, there is no option to collapse and the item menu if it has dropdown elements will become unclickable.
So I know you can’t change that because I have found a similar topic, but if I use header builder can you help me achieve this?
https://imgur.com/a/0kU1X2Z
Center menu and items to be on under each other instead of inline display.
Thanks and waiting for your answer.

Hi,

You can use the following custom CSS code for mobile devices, but since in changes header layout, the correct work of some of the header builder options can’t be guaranteed.

	body .whb-header-bottom-inner {
		height: auto;
	}
	body .woodmart-navigation .menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
	}

Regards

Hey @Bogdan,
everything seems to be perfect.
One more thing needs to be done to move logo banner above the menu and that’s all.
Thanks again for great support!

Site HTML structure didn’t allow us to place page content above the site header. If you want to add the logo to your mobile site view, you need to add it via logo element in the mobile header using header builder editor.

Regards

[Author]

Posts