InsideDarkWeb.com

Different locations for search bar depending on width

I have a problem regarding the block moving with XML. I moved the search-bar with
<move element="top.search" destination="catalog.topnav" after="-"/> which is working as needed (it´s moved into the navbar), but now for responsiveness purposes I need to move it back to its default position as for now on small devices it – logically – is moved to the sidenav (luma based).
This is obviously sth I don´t want to happen. So as far as I know there is no way of adding a condition to the default.xml so I tried some simple JS

window.onload = function() {
    if(window.width < 768) {
        document.querySelector('.header.content').appendChild(document.querySelector('.block-search'));
    }
}

but – surprise – this does not work (nothing is happening. no errors). I checked the selectors so they should be fine.
Maybe someone would be so kind to help me please. Thanks 🙂

EDIT: I removed the XML part and added the JS else part

window.onload = function() {
    if(window.width < 768) {
        document.querySelector('.header.content').appendChild(document.querySelector('.block-search'));
    }
    else{
        document.querySelector('.navigation').insertBefore(document.querySelector('.block-search'),document.querySelector('.navigation').firstChild);
    }
}

but with small devices it is still not in the default header position, but moved inside the side nav panel…

Magento Asked by Jannis S. on November 25, 2021

1 Answers

One Answer

I was able to fix it. Just had to move from JS to jQuery:

require([ "jquery" ], function($) {
    if( $(window).width() < 768 ) {
        $('.header.content').append($('.block-search'));
    }
    else{
        $('.navigation').children(":first").append($('.block-search'));
    }
});

Thanks anyway!

Answered by Jannis S. on November 25, 2021

Add your own answers!

Related Questions

Magento 2 get Admin session in frontend

1  Asked on December 29, 2020 by ramesh

     

Whitespace before SOAP declaration

3  Asked on December 29, 2020 by boruch

     

display magento2 menu based on the customer login

0  Asked on December 29, 2020 by venkata-prasad

       

Override a controller in magento 1.9

0  Asked on December 29, 2020 by mahesh1343

 

Move block after price using layout xml in M1.9

0  Asked on December 27, 2020 by sam-provides

     

Send email to a friend is not working

2  Asked on December 26, 2020 by bineesh

     

How in Block a productcollection of template render?

2  Asked on December 24, 2020 by andrej-wasemiller

     

Magento 2 Sort order on catalogue widget

0  Asked on December 23, 2020 by carter

   

Ask a Question

Get help from others!

© 2021 InsideDarkWeb.com. All rights reserved.