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>
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

  • Thanks but..I wanted to make it in code by adding templates. – learner Jul 4 '17 at 9:54
  • please check my updated answer , try option 2, if any problem then let me know thanks – Manoj Deswal Jul 4 '17 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 Jul 4 '17 at 10:32
  • 1
    remove margin and check all, I hope you got the right output which you were looking for . Thanks – Manoj Deswal Jul 4 '17 at 10:40
  • 1
    .nav-sections{margin-bottom:0px;} and run commands to compile less – Manoj Deswal Jul 4 '17 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/

  • I wanted to add it in right float to navigation bar. yes I am doing this using my custom theme – learner Jul 4 '17 at 7:44
  • 1
    @Priya I update my answer – Rajkumar .E Jul 4 '17 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 Jul 4 '17 at 8:51
  • follow this link magento.stackexchange.com/questions/113969/… to add custom div – Rajkumar .E Jul 4 '17 at 9:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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