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.