Magento2 – How to Add Static Block to Header Menu

createheadermagento2static-block

My Categories are displayed in my Header Main menu. Now I want to add another link( called 'about us') after the last category in my header.
I plan to create a static cms block -> in it's content put some html:

<ul>
    <li class="ui-menu-item level0">
        <a href="#" class="level-top"><span>About Us</span></a>
    </li>
</ul>

then add this static block to the header. How can I achieve this ?

Best Answer

Firstly you need to create static cms block about us. and add your content in content part.

Now to add that block in header follow the below steps :

Create/Add new category from product/categories from admin menu.
Make Sure Enable Categories menu and Include in menu is selected as enable.
Click on Content tab and go to the Add CMS Block - Select your about us cms block from there.
From Display settings , Select Display mode as a Statick Block only and Anchor as yes.
Click on Save button and after that run the cache:clean command and check.

Screenshot for select static block :

Screenshot of display settings :

Note : You can also do it same thing by overriding the respected template.

Related Solutions

Magento CMS – Add Static Block to Home Page

I may be totally wrong, but you can call it like this

{{block type="cms/block" block_id="home_image-center"}}

in cms -> homepage-> content : in that click show/hideeditor past above code it's work

Magento 2 Top Menu – How to Add Link with Content

You can add elements to the top menu using the event page_block_html_topmenu_gethtml_before.

Step 1 - So you need to create a module with these files (all the files should be in app/code/[Namespace]/[Module]):

Step 2 - app/code/[Namespace]/[Module]/etc/module.xml - the module declaration file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[Namespace]_[Module]" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

Step 3 - app/code/[Namespace]/[Module]/registration.php - the registration file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[Namespace]_[Module]',
    __DIR__
);

Step 4 - app/code/[Namespace]/[Module]/etc/frontend/events.xml - the events declaration file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="page_block_html_topmenu_gethtml_before">
        <observer name="[namespace]_[module]_observer" instance="[Namespace]\[Module]\Observer\Topmenu" />
    </event>
</config>

Step 5 - app/code/[Namespace]/[Module]/Observer/Topmenu.php - the actual observer

<?php
namespace [Namespace]\[Module]\Observer;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;
class Topmenu implements ObserverInterface
{
    public function __construct(
        ...//add dependencies here if needed
    )
    {
    ...
    }
    /**
     * @param EventObserver $observer
     * @return $this
     */
    public function execute(EventObserver $observer)
    {
        /** @var \Magento\Framework\Data\Tree\Node $menu */
        $menu = $observer->getMenu();
        $tree = $menu->getTree();
        $data = [
            'name'      => __('Menu item label here'),
            'id'        => 'some-unique-id-here',
            'url'       => 'url goes here',
            'is_active' => (expression to determine if menu item is selected or not)
        ];
        $node = new Node($data, 'id', $tree, $menu);
        $menu->addChild($node);
        return $this;
    }
}

Best Answer

Related Solutions

Magento CMS – Add Static Block to Home Page

Magento 2 Top Menu – How to Add Link with Content

Related Topic