2

I wanted to add the search box to right of the menu bar. I also wanted to add division tag immediate below of the menu bar without any white space or padding.! How can I do this.? Thank you in advance.

Update: default.xml

 <!--  Moving block elements and rearranging to have in order of logo,toplinks , minicart , top navigation menu and search bar  -->
   <move element="header.panel" destination="header.panel.wrapper"/>
   <move element="logo" destination="header.panel"/>
   <move element="top.links" destination="header.panel" after="logo" before="minicart"/>
   <move element="minicart" destination="header.panel" before="-"/>
   <move element="top.search" destination="page.top" after="catalog.topnav" before="-"/>
    <move element="top.search" destination="catalog.topnav" after="-"/>
 <!-- Remove default elements -->
   <referenceBlock name="advanced-search-link" remove="true"/>

 <!-- Adding logo -->
     <referenceBlock name="logo">
             <arguments>
                 <argument name="logo_file" xsi:type="string">images/logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">400</argument>
                 <argument name="logo_img_height" xsi:type="number">200</argument>
             </arguments>
         </referenceBlock>
 <!--adding blocks below main nav -->


 <referenceContainer name="page.top">
         <container name="belowNav" as="belowNav" label="Below Nav" htmlTag="div" htmlClass="belowNav">  
             <block class="Magento\Framework\View\Element\Template" name="div-below1.nav"  template="Magento_Theme::testtry.phtml"></block>

         </container>
          </referenceContainer>
Improve this question

2 Answers 2

Reset to default
4

To your extended question " add div tag immediately below the menu "

1 ) Create a block , where you can place your DIV or any content inside that like some offer are placed below menu . I have displayed the block on home page only , selected display on specified page, you can do for all page

enter image description here

2) Now create a widget , select the block you created first and then do below layout settings to display the block just below navigation bar

enter image description here

option 2 adding via template

add below code to your extended default.xml 

<referenceContainer name="page.top">
        <container name="belowNav" as="belowNav" label="Below Nav" htmlTag="div" htmlClass="belowNav">  
            <block class="Magento\Framework\View\Element\Template" name="div-below1.nav"  template="Magento_Theme::html/container1.phtml"></block>

        </container>
         </referenceContainer>

and place container1.phtml file inside

app/design/frontend/vendorname/themename/Magento_Theme/templates/html/container1.phtml

Run deploy and cache commands. You also need to do some css settings to style the text and container . I typed hello in my container1.phtml

enter image description here

if any issue then let me know

Thanks

Improve this answer
16
  • Thanks but..I wanted to make it in code by adding templates.
    – learner
    Commented Jul 4, 2017 at 9:54
  • please check my updated answer , try option 2, if any problem then let me know thanks
    – Manoj Deswal
    Commented Jul 4, 2017 at 10:23
  • I m not getting it right .. I have added my default.xml to the edited question pls check if anything is wrong
    – learner
    Commented Jul 4, 2017 at 10:32
  • 1
    remove margin and check all, I hope you got the right output which you were looking for . Thanks
    – Manoj Deswal
    Commented Jul 4, 2017 at 10:40
  • 1
    .nav-sections{margin-bottom:0px;} and run commands to compile less
    – Manoj Deswal
    Commented Jul 4, 2017 at 10:58
1

If you want move search bar to header(top.links),

create custom theme, then create this file

<magento-root>/app/design/frontend/<vendor-name>/<theme-name>/Magento_Theme/layout/default.xml

Add below content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout  /etc/page_configuration.xsd">
<body>
    <move element="top.search" destination="catalog.topnav" after="-"/>
</body>

After, clear cache, then check it.

Reference: http://gworks.mobi/blog/2016/06/07/magento2-move-elements-block/

Improve this answer
4
  • I wanted to add it in right float to navigation bar. yes I am doing this using my custom theme
    – learner
    Commented Jul 4, 2017 at 7:44
  • 1
    @Priya I update my answer
    – Rajkumar .E
    Commented Jul 4, 2017 at 8:45
  • Got the search box right .Thank you .. My extended question to add div tag immedietly below the menu without white space?? !! can you help it out I am trying hardly for about a day!
    – learner
    Commented Jul 4, 2017 at 8:51
  • follow this link magento.stackexchange.com/questions/113969/… to add custom div
    – Rajkumar .E
    Commented Jul 4, 2017 at 9:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.