Shrink mobile hamburger and search icon

Hey Jason,
It looks like you are using the option:
Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu ▸ Menu Icon Style ▸ Small

Best regards,
Mike

Hi,
I don’t have a solution to add another burger menu that adds the sidebar elements, but you can add this css to show the sidebar elements below the content on mobile:

@media only screen and (max-width: 767px) {
	.responsive #top.woocommerce-shop #main .sidebar {
    display: block;
    float: left;
    padding: 0;
	}
	.responsive #top.woocommerce-shop #main .sidebar .inner_sidebar {
    margin-left: 0;
	}
	.responsive #top.woocommerce-shop .container .av-content-small {
	margin-bottom: 0;
	padding-bottom: 0;
	}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I could probably write some javascript to move it to the top, but it’s kind of large on mobile and would make your users swipe a couple of times before they see your products, are you sure you want that?

Best regards,
Mike

Hi,
To have the sidebar search bar at the top of the shop on mobile try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function mobile_shop_search_on_top() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
	var width = $(window).width()
  $('#top.woocommerce-shop').each(function() {
  	if ($(window).width() < 768) {
  	$('#aws_widget-2').insertBefore('.template-shop.content ').css({'padding-bottom' : '0'});
  	} else {}
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'mobile_shop_search_on_top');

This will work will or without the precious css, please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike