1

I am using Magento 2.2.2 and I am trying to add some custom menu links to magento in the mobile menu layout.

I tried adding a custom block with menu links by referring catalog.topnav block

default.xml

<referenceBlock name="catalog.topnav">
        <block class="Magento\Theme\Block\Html\Topmenu" name="custom.catalog.topnav" template="Mymodule_TopMenu::html/topmenu.phtml"/>
    </referenceBlock>

topmenu.phtml

<li class="custom-menu">
    <a href="<?php echo $block->getUrl('about-us'); ?>">About Us</a>
</li>

After doing so, the menu links are getting added to the navigation menu bar. And i am using a custom css to hide those menus from desktop layout. Only in mobile layout i am displaying it.

The problem is the menu links needs to be present in the navigation menu bar so as to display in the mobile layout as well. But i wanted to render my custom menu links only in mobile menu layout.

How can i achieve it ? Please suggest some approach.

Improve this question

1 Answer 1

Reset to default
2

File Path: app/code/Solwin/Module1/view/frontend/layout/default.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright info.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="store.menu">
            <block name="store.menu.logo" template="Solwin_Module1::html/topmenu_custom.phtml" after="catalog.topnav" />
        </referenceBlock>
    </body>
</page>

File Path:app/code/Solwin/Module1/view/frontend/templates/html/topmenu_custom.phtml

<?php
/** @var \Magento\Framework\View\Element\Template $block */
?>
<ul class="ui-custom-menu">
  <li class="ui-custom-menu-tem">
      <a href="<?php echo $this->getBaseUrl()."/custommenu1"; ?>" class="level-top">
          <span><?= __("CustomMenu1")?></span>
      </a>
  </li>
  <li class="ui-custom-menu-tem">
      <a href="<?php echo $this->getBaseUrl()."/custommenu2"; ?>" class="level-top">
          <span><?= __("CustomMenu2")?></span>
      </a>
  </li>
</ul>

<style>
.ui-custom-menu {
  margin: 0;
  padding: 0;
}
.ui-custom-menu-tem {
    border-top: 1px solid #d1d1d1;
    font-size: 1.6rem;
    margin: 0;
}
.ui-custom-menu-tem .level-top {
    font-weight: 700;
    padding: 8px 40px 8px 15px;
    text-transform: uppercase;
    word-wrap: break-word;
    color: #575757;
    text-decoration: none;
    display: block;
}
</style>
Improve this answer
1

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.