cancel
Showing results for 
Search instead for 
Did you mean: 

How to move "header links" to below "top search"

SOLVED

How to move "header links" to below "top search"

Hi

 

I would like to remove the top panel, and move the "header.links" to the custom header.

At the moment it's removing the top.panel, however the links are not appearing.

 

Any suggestions are welcome.

default.xml

 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <!--To add custom logo-->
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">300</argument>
                <argument name="logo_img_height" xsi:type="number">78</argument>
            </arguments>
        </referenceBlock>
     <referenceBlock name="header.panel" remove="true"/>
        <referenceContainer name="header.container">
                <block class="Magento\Framework\View\Element\Template" name="custom_header" as="custom_header" template="Magento_Theme::html/customheader.phtml"  before="-">
                    <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
                    <arguments>
                        <argument name="css_class" xsi:type="string">header links</argument>
                    </arguments>
                </block>
            </block>
        </referenceContainer>
    

        <move element="minicart" destination="custom_header"/>
        <move element="top.search" destination="custom_header"/>
        <move element="logo" as="logo" destination="custom_header"/>
        <move element="top.links" as="top.links" destination="custom_header"/>
   
       
    </body>
</page>

 

customheader.phtml

<header>
<div id="custom-header-id"class="header page-main">
       <div class="row no-margin">
        <div class="col-md-2 col-sm-3 col-xs-5 custom-logo">
            <?php echo $this->getChildHtml("logo"); ?>
        </div>
         <div class="col-md-3 col-sm-4 col-xs-7 mobile-link">
            <?php echo $this->getChildHtml('minicart'); ?>
            <?php echo $this->getChildHtml("topSearch"); ?>
            <?php echo $this->getChildHtml("topLinks"); ?>
        </div>
    </div>
</div>
</header>
1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to move "header links" to below "top search"

Hello @tvgarden

 

don't remove it 

<referenceBlock name="header.panel" remove="true"/>

first, try to move the element.

 

if then move inside element first then, at last, remove it.

 

Hope it will help you.

 

If works then mark as solution.

 

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

View solution in original post

2 REPLIES 2

Re: How to move "header links" to below "top search"

Hello @tvgarden

 

don't remove it 

<referenceBlock name="header.panel" remove="true"/>

first, try to move the element.

 

if then move inside element first then, at last, remove it.

 

Hope it will help you.

 

If works then mark as solution.

 

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: How to move "header links" to below "top search"

hi @Sunil Patel

 

I have slightly changed the code but still not appearing.

 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <!--To add custom logo-->
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">300</argument>
                <argument name="logo_img_height" xsi:type="number">78</argument>
            </arguments>
        </referenceBlock>

        <referenceContainer name="header.container">
                <block class="Magento\Framework\View\Element\Template" name="custom_header" as="custom_header" template="Magento_Theme::html/customheader.phtml"  before="-">
           
            </block>
        </referenceContainer>
    
  <referenceContainer name="header.panel">
         <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
                    <arguments>
                        <argument name="css_class" xsi:type="string">header links</argument>
                    </arguments>
        </block>
  
  </referenceContainer>
        <move element="minicart" destination="custom_header"/>
        <move element="top.search" destination="custom_header"/>
        <move element="logo" as="logo" destination="custom_header"/>
        <move element="top.links" as="top.links" destination="custom_header"/>
       <move element="header.panel" as="header.panel" destination="custom_header"/>
       
    </body>
</page>
<header>
<div id="custom-header-id"class="header page-main">
       <div class="row no-margin">
        <div class="col-md-2 col-sm-3 col-xs-5 custom-logo">
            <?php echo $this->getChildHtml("logo"); ?>
        </div>
         <div class="col-md-3 col-sm-4 col-xs-7 mobile-link">
            <?php echo $this->getChildHtml('minicart'); ?>
            <?php echo $this->getChildHtml("topSearch"); ?>
            <?php echo $this->getChildHtml("headerPanel"); ?>
        </div>
    </div>
</div>
</header>