Magento 2.2.5 – How to Add Custom Menu in Top Nav Section

customizemagento-2.2.5navigationtoplinks

I'm trying to add custom menu in top nav section or place any custom menu removing the existing one. How to customise this section. Please tell me step by step. I'm unable to do this after the searching in google also, i'm little newbie in magento 2.2.5

Best Answer

You have 2 options here 1 either you use some free extension like IBNAB Menu Mgento menu or 2nd option is create CMS block and add your custom menu html code there then remove your top.cagtalog.nav and add your cms block instead.

Remove Top Menu :

<referenceBlock name="catalog.topnav" remove="true"/>

Add your custom menu cms block:

<block class="Magento\Cms\Block\Block" name="custom.menu" after="-">
    <arguments>
        <argument name="block_id" xsi:type="string">custom-cms-menu</argument>
     </arguments>
</block>

You can move and place code inside any referenceContainer where you want to show the menu.

hope this will help.

Related Solutions

Magento 2 – Navigation Links for CMS Pages

1- Create topmenu.phtml in design/frontend/magento/you_theme/Mageto_Theme/templates/html/topmenu.phtml

<?php
/**
 * Top menu for store
 *
 * @see \Magento\Theme\Block\Html\Topmenu
 */
?>
<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php /* @escapeNotVerified */ echo $_menu; ?>
        something...
    </ul>
</nav>

2- Refresh cache

Magento 1.9 – Adding Top Links to Mobile Menu

Please update the code and try this one where your mobilemenu.phtml added.

    <?xml version="1.0"?>
    <layout version="0.1.0">
        <default>
            <reference name="head">
                <block type="core/template" name="sticky_header">
                    <action method="setTemplate" ifconfig="porto_settings/header/sticky_header"><template>page/html/sticky_header.phtml</template></action>
                </block>
            </reference>
            <block type="megamenu/toggle"></block>
            <reference name="header">
                <block type="core/template" ifconfig="porto_settings/general/disable_responsive"  name="mobile.nav" condition="0" template="smartwave/megamenu/html/mobilemenu.phtml">
                    <block type="page/template_links" name="top.links" as="topLinks" template="page/template/links.phtml" />
                    <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml" />
                </block>
            </reference>
        </default>    
    </layout>

Best Answer

Related Solutions

Magento 2 – Navigation Links for CMS Pages

Magento 1.9 – Adding Top Links to Mobile Menu

Related Topic