Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

SOLVED
Go to solution
‎06-29-2018 07:12 AM
‎06-29-2018 07:12 AM

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>
Labels:
0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
‎06-29-2018 08:00 AM
‎06-29-2018 08:00 AM

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

Reply
2 REPLIES 2
‎06-29-2018 08:00 AM
‎06-29-2018 08:00 AM

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
Reply
‎06-29-2018 08:43 AM
‎06-29-2018 08:43 AM

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>
0 Kudos
Reply