1

I want to move search box to the right side of category lists on top navigation menu:

enter image description here

I've added the following line in Magento_Theme/layout/default.xml which moved search box to the desired position ( image above is the result ) :

<move element="top.search" destination="catalog.topnav" before="-" />

However, when I click on the box to insert text the cursor jumps out of focus immediately. But if I right click into the box -> paste data there and press Enter or magnifier icon, search function still work.

What else do I need to add to my code to make it work, or is there another solution?

Improve this question
2
  • could you just provide link of your site or any screenshot to elaborate it. So it would be better to understand?
    – Abhishek Tripathi
    Commented Mar 21, 2018 at 11:19
  • I've added the image, thank you. Site link is 35.197.145.89
    – Madn3ss795
    Commented Mar 21, 2018 at 11:24

2 Answers 2

Reset to default
1

Your search is working but not letting you click into it because one class is added into it that is ui-menu-item & that because it is been added into catalog.topnav block.So the js (menu.js) of this adds ui-menu-item to it look the below code (You can check it by inspect element in your browser).

<div class="block block-search ui-menu-item" role="presentation">

When you remove class ui-menu-item from this dive it will work but it is not feasible there when you add this to the catalog.topnav so better would be add this code into your default.xml file

<move element="top.search" destination="store.menu" after="catalog.topnav"/>

Instead of the code you added to it & just target your <div class="block block-search"> there & add a css for it like this 

.block.block-search {display: block;}

For better look & feel do adjust it with your own css.

Note: While you are doing this make sure your cache is disable or run the below command to see the output

Do this changes by creating your own theme instead of editing the core files it is not a best practice for magento development.

php bin/magento cache:flush
Improve this answer
2
  • Thank you for the solution. I'm confused about the second part: how and where can I add a css file that targets <div class="block block-search"> ? ( I've created my own theme which inherits from magento blank ).
    – Madn3ss795
    Commented Mar 21, 2018 at 13:43
  • simply in your theme you can create your own css into your web/css folder & pass it's reference link into your default_head_blocks.xml file of your theme that is located at app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml
    – Abhishek Tripathi
    Commented Mar 21, 2018 at 13:47
0
  1. Edit default.xml

app/design/frontend/Vendor_Name/Theme_Name/Magento_Theme/layout/default.xml

Example

<?xml version="1.0"?>
<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="store.menu" after="-" />
</body>
</page>
  1. Flush Magento cache.

Note:- If it still doesn't work then you can remove the block and add it again

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>

        <referenceBlock name="top.search" remove="true"/>

        <referenceContainer name="store.menu">
            <block class="Magento\Framework\View\Element\Template" name="top.search.nav" as="topSearchNav" template="Magento_Search::form.mini.phtml" after="-" />
        </referenceContainer>

    </body>
</page>
Improve this answer

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.