Custom header navigation link and sort order

Question

I'm trying to add a custom CMS page link (home) to the navigation menu which was successful using the following code in layout/default.xml

    <referenceContainer name="catalog.topnav">
      <block class="Magento\Cms\Block\Block" name="home-link" before="-">
        <arguments>
          <argument name="block_id" xsi:type="string">home-link</argument>
        </arguments>
      </block>
    </referenceContainer>

However - the link is simply added to the end of the menu. I would like, if possible to be able to display this as the first link.

Can anyone help please?

Answer 1

One way to do this is to place the link in store.menu instead of catalog.topnav.

<referenceBlock name="store.menu">
    <block class="Magento\Cms\Block\Block" name="home-link" before="-">
        <arguments>
            <argument name="block_id" xsi:type="string">home-link</argument>
        </arguments>
    </block>
</referenceBlock>

One of the issues here is the link wont be inline with the other links in the menu, but here are some styles i played with to get it looking close.

display: block;
float: left;
z-index: 9;
margin: 15px 20px;
position: relative;
font-weight: 900;
color: #575757;

I did this in the browser, so you might need to play with it a little more depending on the theme you are using and the responsive needs you have.