Search Icon Customization in Mobile View

  • Resolved v2l2

    (@v2l2)


    3 months 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)

    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 );

    You have two ways to add this code to your theme:

    1. Open the?functions.php?in your child theme and add the code at the end.
    2. ?or install the?Code Snippets?plugin and apply this code as a snippet.

    Regards,
    Kris

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.