We utilized a XML snippet in order to load a specific block into the Topnavi.

Now, when in responsive mode we are having all topmenu items as a normal list in the menu.

Normal: Normal view Responsive view: Responsive view

I do want to have "Sales Partners", "Electronic Components", ... in a specific Submenu, like I have it for the Menu items:

enter image description here

How can I do this? In my default.xml I have something like this:

<referenceContainer name="header.panel">
      <block class="Magento\Cms\Block\Block" name="top-navigation">
                    <argument name="block_id" xsi:type="string">top-navigation</argument>
                    <argument name="css_class" xsi:type="string">header links</argument>

This loads the desired block which is a block due to the translation problems we have for multilingual pages.

This loads the block top-navigation which holds this content:

<ul class="header links show">
    <li class="nav item">
        <a href="/unternehmen"><span>&Uuml;ber uns</span></a>
        <ul class="dropdown switcher-dropdown level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all">
            <li class="view-company-element"><a href="/unternehmen/news">News</a></li>

            <li class="view-company-element"><a href="/rochester-electronics">Rochester Electronics</a></li>

            <li class="view-company-element"><a href="/osram-opto-semiconductors">OSRAM OS</a></li>

            <li class="view-company-element"><a href="/unternehmen/end-of-life-management">End-Of-Life Management</a></li>

            <li class="view-company-element"><a href="/unternehmen/zertifizierte-qualitaet">Zertifizierte Qualit&auml;t</a></li>
    <li><a href="/customer/account/">Mein Konto</a></li>
    <li class="authorization-link" data-label="oder"><a href="/customer/account/login/">Anmelden</a></li>
    <li class="nav item"><a href="/checkout/cart/">Warenkorb</a></li>
    <li class="nav item"><a href="/contact/">Kontakt</a></li>

What can I do in order to get this stuff working?

  • Could you please share your url? I need to check once.
    – Tonmoy
    Commented Mar 15, 2017 at 8:55
  • No I cant, but I can add outputted HTML to the question itself. Just give me several minutes, and then I'll add it.
    – Max
    Commented Mar 15, 2017 at 9:40
  • Please see my updated question @Tonmoy
    – Max
    Commented Mar 15, 2017 at 10:09
  • Trying to debug how the product section comes with a drop down. I think you missed some classes. Try to find that I wish you can solve this problem.
    – Tonmoy
    Commented Mar 15, 2017 at 13:43
  • 1
    Try this store.ibnab.com/free-magento-2-easy-megamenu.html
    – Jackson
    Commented Mar 17, 2017 at 6:58

1 Answer 1


Try to compare with the following code,

<li class="level0 nav-3 level-top parent ui-menu-item" role="presentation">
<a class="level-top ui-corner-all" href="http://magento2-demo.nexcess.net/men.html" aria-haspopup="true" id="ui-id-5" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><span>Men</span></a>
<ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none; top: 47px; left: 0px;" role="menu" aria-expanded="false" aria-hidden="true">
    <li class="level1 nav-3-1 first parent ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/tops-men.html" aria-haspopup="true" id="ui-id-17" class="ui-corner-all" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><span>Tops</span></a><ul class="level1 submenu ui-menu ui-widget ui-widget-content ui-corner-all expanded" style="display: none; top: 36px; left: 0px;" role="menu" aria-expanded="false" aria-hidden="true"><li class="level2 nav-3-1-1 first ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/tops-men/jackets-men.html" id="ui-id-19" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Jackets</span></a></li><li class="level2 nav-3-1-2 ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/tops-men/hoodies-and-sweatshirts-men.html" id="ui-id-20" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Hoodies &amp; Sweatshirts</span></a></li><li class="level2 nav-3-1-3 ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/tops-men/tees-men.html" id="ui-id-21" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Tees</span></a></li><li class="level2 nav-3-1-4 last ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/tops-men/tanks-men.html" id="ui-id-22" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Tanks</span></a></li></ul></li><li class="level1 nav-3-2 last parent ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/bottoms-men.html" aria-haspopup="true" id="ui-id-18" class="ui-corner-all" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><span>Bottoms</span></a><ul class="level1 submenu ui-menu ui-widget ui-widget-content ui-corner-all expanded" style="display: none;" role="menu" aria-hidden="true" aria-expanded="false"><li class="level2 nav-3-2-1 first ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/bottoms-men/pants-men.html" id="ui-id-23" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Pants</span></a></li><li class="level2 nav-3-2-2 last ui-menu-item" role="presentation"><a href="http://magento2-demo.nexcess.net/men/bottoms-men/shorts-men.html" id="ui-id-24" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Shorts</span></a></li></ul></li></ul></li>
  • I can change the classes, but this does not change the behaviour of the menu.
    – Max
    Commented Mar 16, 2017 at 13:21
  • Do you have any way..I want to see the section live!
    – Tonmoy
    Commented Mar 16, 2017 at 13:41
  • give me a shot when u are there.. dont wanna leave it public for so long.
    – Max
    Commented Mar 16, 2017 at 19:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.