Changing main navigation?

Question

I would like to change the dropdown behaviour of navigation. Which files need to be changed?

I try to give the dropdown 100% width and place items inline

I see this file /vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml. How do I override this in a custom theme and how do I add .css and .js to it?

Hoang Huynh Nhat · Answer 1 · 2016-04-07T09:38:03.753

Firstly, you need to create your own theme and override which module you want to do. 1. you need to override module-theme in your theme: layout and template

/root/test/kingfisherflyshop-new/app/design/frontend/yournamespace/your module-name/Magento_Theme/layout/override/base/default.xml

app/design/frontend/yournamespace/your module-name/Magento_Theme/templates/html/topmenu.phtml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-override.html

P S · Answer 2 · 2018-01-04T18:13:22.227

overriding template in magento 2 can be achieved in two different ways:

1. Theme way: Create your own theme inside which create the following file: app/design/frontend/Vendor/Theme/Magento_Theme/templates/html/topmenu.phtml. Copy the code from the core file and paste into yours. After wards you can do your customizations.

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
echo 'This is my custom code from theme.';
die();
?>
<?php
/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */
?>
<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

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

2. Module way:. Create your own module inside which create a layout app/code/Vendor/ModuleName/view/frontend/layout/default.xml.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
            <referenceBlock name="catalog.topnav">
                <action method="setTemplate">
                    <argument name="template" xsi:type="string">Vendor_ModuleName::html/topmenu.phtml</argument>
                </action>
            </referenceBlock>
    </body>
</page>

Now create the template that we specified inside the layout.

app/code/Vendor/ModuleName/view/frontend/templates/html/topmenu.phtml

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

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

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

Adding CSS

To add css you may follow any of these two approaches.

1. Module way: Edit your layout file as follows, for eg, you should edit app/code/Vendor/ModuleName/view/frontend/layout/default.xml as:

 <?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
    <body>
            <referenceBlock name="catalog.topnav">
                <action method="setTemplate">
                    <argument name="template" xsi:type="string">Vendor_ModuleName::html/topmenu.phtml</argument>
                </action>
            </referenceBlock>
    </body>
</page>

Next create the css file within your module in directory app/code/Vendor/ModuleName/view/frontend/web/css/mycss.css.

2. Theme way: Check this solution out.

These are tested solution by me, so I hope works for you. Thank you.

Changing main navigation?

2 Answers2