1

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

0

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!

| improve this answer | |

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.