How to show accordion menu on Desktop view?
Currently the mobile(hamburger) menu is displayed for devices which have screen width < 768 px.
There steps to show accordion menu on Desktop view as bellow:

Demo accordion Desktop Menu: https://builder.landofcoder.com/demo-accordion-menu
Step 1: Create Accordion Menu profile
Add new megamenu profile as this:

Choose Desktop Template = Accordion Menu
Step 2: Add custom css code
Please add custom css code bellow on custom css file of current theme or you can add on admin > Stores > Configuration > Venustheme.com > Custom CSS on Frontend as screenshot:

// Custom css code
.ves-megamenu.ves-daccordion .navigation .nav-item a {
display: block;
}
.ves-megamenu.ves-daccordion >.navigation .level0 {
float: left!important;
border-top: 1px solid #d1d1d1;
border-top-color: rgba(0,0,0,.08);
}
.ves-megamenu.ves-daccordion>.navigation {
border: 1px solid rgba(0,0,0,.15);
float: left;
background: #f8f8f8;
}
.ves-megamenu.ves-daccordion .navigation .opener {
display: inline-block!important;
}
.ves-megamenu.ves-daccordion .opener:before {
content: "\e61c";
}
.ves-megamenu.ves-daccordion .opener.item-active:before {
content: "\e60f";
}
.ves-megamenu.ves-daccordion .navigation .opener {
position: absolute!important;
right: 0!important;
}
Step 3: Add megamenu block on frontend layout or Widget Instance
To show custom accordion menu on frontend, we can use layout xml to load the menu block as this:
<referenceContainer name="content">
<block class="Ves\Megamenu\Block\Menu" name="catalog.accordionnav" ifconfig="vesmegamenu/general_settings/enabled" template="Ves_Megamenu::topmenu.phtml">
<arguments>
<argument name="alias" xsi:type="string">accordion-menu-profile</argument>
</arguments>
</block>
</referenceContainer>
Or use widget Instance
Go to admin > Content > Element > Widgets > Add new Widget as screenshots:



Step 4: Flush cache of the site
Last updated
Was this helpful?