Made in Chicago Company Directory

Resolved v2l2
(@v2l2)

4 weeks, 1 day ago

Dear Support Team,

I am using the Hestia Pro theme and would like some assistance with customizing the mobile view of my website. Specifically, I would like to move the search icon outside of the hamburger menu so that it is placed in a different location, before it (the 3 lines).

I’ve provided the screenshot with a marker indicating where I would like the search icon to be positioned:

Could you please guide me on how to achieve this customization?

Thank you in advance for your help!

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

Plugin Support

Kris

(@c0nst)

3 weeks, 3 days ago

Hi @v2l2!

Here you go:

add_action( 'wp_head', function() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			function moveSearchBox() {
				if ($(window).width() <= 768) {
					if (
						!$('#menu-top-menu .dgwt-wcas-search-wrapp')
							.parent()
							.hasClass('navbar-toggle')
					) {
						$('#menu-top-menu .dgwt-wcas-search-wrapp').insertBefore(
							'.navbar-toggle'
						);
					}
				} else {
					if ($('.navbar-toggle + .dgwt-wcas-search-wrapp').length) {
						$('#menu-top-menu').append(
							$('.navbar-toggle + .dgwt-wcas-search-wrapp')
						);
					}
				}
			}

			$(document).ready(function () {
				moveSearchBox();
			});

			$(window).resize(function () {
				moveSearchBox();
			});
		});
 
	</script>
	<style type="text/css">
		@media (max-width: 768px) {
			.navbar-header .dgwt-wcas-ico-magnifier-handler {
				margin-top: 0;
			}
		}
	</style>
<?php }, 20 );