Search icon mobile version

Hi,

Sorry for the confusion. Appending a Search Icon is only available for the Top Header layout in Enfold theme options > General Layout tab.

We will add a note about that in the upcoming version.

Cheers!
Yigit

Hi,
Thanks for your patience, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function search_for_mobile_sidebar_header() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
	(function($){
	var width = $(window).width();
	var search = $('<li id="menu-item-search" class="mobile-search menu-item menu-item-search-dropdown menu-item-avia-special" role="menuitem"><a aria-label="Search" href="?s=" rel="nofollow" data-avia-search-tooltip="<form role=&quot;search&quot; action=&quot;https://your-domain.com/&quot; id=&quot;searchform&quot; method=&quot;get&quot; class=&quot;&quot;><div><input type=&quot;submit&quot; value=&quot;&quot; id=&quot;searchsubmit&quot; class=&quot;button avia-font-entypo-fontello&quot; /><input type=&quot;text&quot; id=&quot;s&quot; name=&quot;s&quot; value=&quot;&quot; /></div></form>" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" style=""><span class="avia_hidden_link_text">Search</span></a></li>');
	if (width <= 767) {
	$(search).insertBefore('.main_menu');
	} else {}
	})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'search_for_mobile_sidebar_header');

Then add this css to your child theme stylesheet or the theme option Quick CSS:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #menu-item-search.mobile-search {
top: 0;
height: 80px;
right: 50px;
display: inline-block;
position: absolute;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

• This reply was modified 1 year, 10 months ago by Mike. Reason: corrected quotes in code

Hi,
Please include an admin login in the Private Content area so I can examine.

Best regards,
Mike

Hi,
Thanks for the login, the code I post was converted by our site, it needed to use " instead of " I corrected your site and will adjust the code above for future readers.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike