Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 16, 2022 at 9:49 pm #1352000
    navindesigns

    On my site – https://staging3.hardwoodbrothers.com/ – see login info below to access site

    I have customized the search box to be expanded on desktop which looks great. How can I add the search box or just the search icon on mobile?

    I used the following code to add to customize the search

    PHP
    add_filter( ‘wp_nav_menu_items’, ‘avia_append_search_nav’, 10, 2 );

    function avia_append_search_nav ( $items, $args )
    {
    if(avia_get_option(‘header_searchicon’,’header_searchicon’) != “header_searchicon”) return $items;

    if ((is_object($args) && $args->theme_location == ‘avia’) || (is_string($args) && $args = “fallback_menu”))
    {
    global $avia_config;
    ob_start();
    $getform = get_search_form(false);

    $items .= ‘<li id=”menu-item-search” class=”noMobile menu-item menu-item-search-dropdown”>’.$getform.’‘;
    }
    return $items;
    }

    • This topic was modified 2 years, 6 months ago by navindesigns.
    May 18, 2022 at 1:18 pm #1352177
    Mike

    Hey navindesigns,
    Thank you for your patience and login, in your function above I replaced the item class noMobile with menu-item-search-mobile
    Then I added this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_burger_search_mobile() { ?>
    <script>
(function($){
$('#avia-menu').one('click', function(){
jQuery('#menu-item-search.menu-item-search-mobile').clone().wrapInner('<div class="burger_search_mobile"/>').children(0).unwrap().prependTo('#av-burger-menu-ul');
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_burger_search_mobile');

    and this css to your child theme stylesheet:

    #av-burger-menu-ul > .burger_search_mobile {
	padding-left: 20px;
}
.avia_mobile #top #av-burger-menu-ul > .burger_search_mobile #searchsubmit {
    height: 100%;
}

    Now your search shows at the top of your mobile menu:
    2022-05-18_001.jpg
    Please clear your browser cache and check.

    Best regards,
    Mike

    May 18, 2022 at 3:15 pm #1352193
    navindesigns

    Thank you so much. this looks great

    on my Iphone, this is what I see
    mobilesearch
    two minor things

    May 18, 2022 at 7:02 pm #1352217
    Mike

    Hi,
    Glad to hear, please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.