Change the layout of mega menu on mobile device

[MilkBar1]

I am currently using the capital theme mega menu. As can be seen on the image, you can expand the menu by pressing the plus icon. If you press on the title itself (next to the plus icon), you get the whole collection. However, I want to remove the plus sign and if you press the title, it should expand the menu instead of going to the collection.

URL: https://www.milk-bar.be/

thank you in advance

[made4Uo]

Hi @MilkBar1 ,

Please follow the instructions below.

1. Go to Admin > Online store > Themes > Actions > Edit code
2. Go to Asset folder, and open your global CSS file or common CSS file
3. Add the code below.

@media only screen and (max-width: 750px) {
button.navigation-dropdown-toggle {
    width: 100%;
    position: absolute;
    background: transparent;
}

.navigation-dropdown-toggle svg {
    display: none;
}
}

[MilkBar1]

Thank you very much. It works perfectly.

If I want to add an arrow down (as in the image) for items with subitems, what should I add to the code? The arrow should only be an icon that shows that there are sub-menus and not a separate button to expand the menu.

Thank you in advance.

[made4Uo]

Hi @MilkBar1 ,

You have to replace the HTML plus icon for this. You actually need to go in the code and do this.