We have a live search product bar on our website, which sits in the right hand sidebar on desktop versions, and we have some custom css which places it at the top on mobile devices, as it would normally be at the bottom on mobiles out of sight, which isn't good. The only thing is, we then need to remove the second search box which appears in one of the widgets on mobiles, as the original one is no longer required.
This can easily be done by the following css:
@media (max-width: 768px) {
.sidebar .widget:first-child {
display: none;
Then only thing is by doing this, this then removes the top search bar on mobiles as well.
Struggling to find a way to remove the bottom widget, whilst keeping the top search bar in place on mobiles?
Have also tried adding the search as a shortcode, and the same thing happens.
Struggling to find out why hiding the widget on mobiles, removes the search bar from the top?
