Whenever I adjust the screen size to that of a phone or any device smaller than 768px, the search bar doesn't display in its proper position until the page is refreshed. It should be correctly placed right from the start. Furthermore, when I resize the screen back to full width, the search bar goes missing unless the page is refreshed. You can observe this behavior [link deleted] by switching to a phone screen in the browser console.
The JavaScript code responsible for this behavior is as follows:
function searchwidget(){
if ($(document).width() <= 767)
{
$('#search_widget').appendTo('.hidden-md-up.text-xs-center.mobile');
}
else if($(document).width() >= 768)
{
$('.header-top #search_widget').prependTo('.right-nav');
}
This snippet shows the template code structure:
{block name='header_nav'}
<nav class="header-nav">
<div class="container">
<div class="row">
<div class="hidden-sm-down">
<div class="col-md-4 hidden-sm-down" id="_desktop_logo">
<a href="{$urls.base_url}" class="header-logo">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
</a>
</div>
<div class="col-md-5 col-xs-12 left-nav">
{hook h='displayNav1'}
</div>
<div class="col-md-3 right-nav">
{hook h='displayNav2'}
</div>
</div>
<div class="hidden-md-up text-xs-center mobile">
<div class="pull-xs-right" id="_mobile_user_info"></div>
<div class="pull-xs-right" id="_mobile_cart"></div>
<div class="pull-xs-left" id="menu-icon">
<i class="material-icons d-inline"></i>
</div>
<div class="top-logo" id="_mobile_logo"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
How can this issue be resolved?