cancel
Showing results for 
Search instead for 
Did you mean: 

custom menu next to the logo and before the search box in your Magento 2 theme

custom menu next to the logo and before the search box in your Magento 2 theme

I want add a custom menu next to the logo and before the search box in Magento 2 theme in windows system, but Menu is not visible in the frontend theme.

Magento_theme/layout/defalut.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!-- Set custom logo -->
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo-red.png</argument>
<argument name="logo_width" xsi:type="number">100</argument>
<argument name="logo_height" xsi:type="number">100</argument>
<argument name="logo_alt" xsi:type="string">Logo name</argument>
</arguments>
</referenceBlock>

<!-- Add custom menu before search box -->
<referenceContainer name="header-wrapper">
<block class="Magento\Framework\View\Element\Template" name="custom.menu" template="Magento_Theme::html/custom_menu.phtml" before="top.search"/>
</referenceContainer>
</body>
</page>

app/design/frontend/Your_Vendor/Your_Theme/Magento_Theme/templates/html/custom_menu.phtml

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Brand Story</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Join our Team</a></li>
</ul>

After creating above file then applies the command
php bin/magento cache:clean




1 REPLY 1

Re: custom menu next to the logo and before the search box in your Magento 2 theme

 

Hi @kalemanojv4e96,

 

For your problem, we have checked and detected some errors in your code. 

 

If you want to edit on Magento Core directly, go to the path: 

Magento_Theme/layout/default.xml

After that, add the file custom_menu.phtml into the path: 

app/Magento/Theme/templates/html/custom_menu.phtml.

In case you want to use on app/design, go to the path: 

app/design/frontend/Magento/Magento_Theme/templates/html/custom_menu.phtml

Or, you can also use our file here to fix this issue. Path: 

app/code/Mageplaza/AdobeTest

 

If the issue will be resolved, please click Kudos & Accept as a Solution. Thank you!

 

Mageplaza | Top-Rated Magento Extension and Solution Provider


Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com