Expand menu-header on mobile - Forum | JoomShaper
Staff replied Helix Framework

Expand menu-header on mobile

Asked by loovanloon 4 years ago Last activity 4 years ago

How do I make the entire header-menu-items clickable on mobile in the right off-canvas area?

I have a main menu twith header-items that expand on hoover on the desktop. On mobile it is a hamburger menu in the right off-canvas area. Clicking on the header-menu-items (mobile) doesn't expand the menu-header-items, you have to click om the ">"-character on the very right -side.

How do I make the entire header-menu-items clickable on mobile in the right off-canvas area?

1 reply

Rashida Rahman Staff

Hi there!

Thanks for your query.

There is no default way to do that. But if your menu items doesn't have any active links then you can try custom css.

Please use the following code in your custom CSS:

body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header > .menu-toggler {
    width: 100%;
    text-align: right;
}

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Hope this helps!

Best Regards

Log in to reply.