3

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?

Improve this question

2 Answers 2

Reset to default
3

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

Improve this answer
2

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.

Improve this answer

Your Answer

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

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