Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 23, 2018 at 12:31 pm #945368
    StartSmallDigital

    Hi guys,

    I’m working on a website and I’m trying to add a search bar inside the burger menu. I’ve tried to use this code:

    add_filter( ‘wp_nav_menu_items’, ‘avf_add_search’, 3, 2 );
    function avf_add_search( $items, $args ) {
    if ($args->theme_location == ‘avia’)
    {
    $search = ‘<li id=”menu-item-search-mobile” class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-top-//level menu-item-top-level-5″>’.get_search_form(false).’‘;
    $items = $search . $items;
    }
    return $items;
    }

    Yet, I had no luck with it.

    The thing is, I’m also using an AMP plugin on this website and I want to match the 2 menus as much as possible. Because of that, I need to add that search at the bottom of the menu.

    Also, if there’s a way to hide the search icon only when the menu is open, that would be awesome.

    April 25, 2018 at 3:38 am #946362
    Ismael

    Hey StartSmallDigital,

    Thank you for using Enfold.

    This is the updated script. It will append a placeholder for the search form and then the script will append the search field once the mobile menu is clicked.

    // https://kriesi.at/support/topic/search-in-mobile-hamburger-menu/#post-943960

    Best regards,
    Ismael

    April 26, 2018 at 12:21 pm #947228
    StartSmallDigital

    Thank you Ismael. :D

    That code works. Yet, is there any way to add the search bar after the menu links?

    And hide the search icon near the x once the burger opens?

    April 28, 2018 at 12:19 pm #948331
    Vinay

    Hi,

    Would you mind providing a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    May 8, 2018 at 2:16 pm #953384
    StartSmallDigital

    Hi Guys,

    Sorry for the late answer. This project was put on hold a little while

    In order to better understand what I’m talking about please go to this article:

    Crema sportului românesc în 2018

    and the AMP version:
    https://elitaromaniei.ro/crema-sportului-romanesc-in-2018/?amp

    In mobile view, look at the search bars inside the menus.
    I have uploaded a side by side print screen here: https://ibb.co/n26DR7

    I want to make the right side look the same as the left one.

    Cheers

    May 10, 2018 at 4:48 am #954273
    Victoria

    Hi StartSmallDigital,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .html_av-overlay-side #top .av-burger-overlay li.menu-item-search-mobile.av-active-burger-items {
        margin-top: 20px;
    }

    .menu-item-search-mobile.av-active-burger-items form > div {
        width: 80%;
        margin: 0 auto;
    }
    #top #searchsubmit {
        width: 40px;
        right: 50px;
        border-radius: 30px;
        background: yellow;
        color: navy;
        font-size: 14px;
    }
    #top #s {
        padding: 7px 0 7px 10px;
        background: yellow !important;
        border-radius: 30px;
    }
   
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    May 18, 2018 at 10:48 am #958536
    StartSmallDigital

    Hi Victoria, that code is awesome. It really helped.

    Still, the search is still above the menu links. Any way I can make the search to be the last item in the menu?
    I use this code for the search bar:
    // Add search bar in menu
    add_filter( ‘wp_nav_menu_items’, ‘avf_add_search’, 9999, 2 );
    function avf_add_search( $items, $args ) {
    if ($args->theme_location == ‘avia’)
    {
    $search = ‘<li id=”menu-item-search-mobile” class=”menu-item”>‘;
    $items = $search . $items;
    }
    return $items;
    }
    add_action(‘wp_footer’, ‘avf_add_search_script’);
    function avf_add_search_script(){
    ?>
    <script type=”text/javascript”>
    (function($) {
    $(‘.av-burger-menu-main’).on(‘click’, function() {
    var page = window.location.href;
    var mobile = $(‘.menu-item-search-mobile’);
    var search = ‘<form action=”‘+page+'” method=”get” class=””><div><input type=”submit” value=”” id=”searchsubmit” class=”button avia-font-entypo-fontello”><input type=”text” id=”s” name=”s” value=”” placeholder=”Search”></div></form>’;

    setTimeout(function() {
    if(mobile.find(‘form’).length == 1) return;
    mobile.html(search);
    }, 500);
    });
    })(jQuery);
    </script>
    <?php
    }

    May 21, 2018 at 9:58 am #959604
    Victoria

    Hi StartSmallDigital,

    Looks fine on my end
    Image 2018-05-21 at 10.57.40.png

    Is this not what you’re looking for?

    Best regards,
    Victoria

    May 21, 2018 at 3:25 pm #959809
    StartSmallDigital

    Hey Victoria,
    That’s how it looks on the AMP version. On the Enfold version, the search bar is above the menu, and I need to drag it down under it.

    May 21, 2018 at 10:29 pm #960038
    Basilis

    Hi,

    I am afraid you’ll need to contact the plugin author for more info about the issue. Making third-party plugins compatible with the theme is unfortunately beyond the support scope we offer. Sorry for that!

    Best regards,
    Basilis

    June 5, 2018 at 4:57 pm #967310
    StartSmallDigital

    Hi Basilis, I don’t need to change the plugin, but the enfold code I got from this forum.

    The Enfold search form needs to be under the Enfold mobile menu. No need to edit the AMP version

    June 8, 2018 at 12:03 am #969863
    Ismael

    Hi,

    Thanks for the update.

    I couldn’t see the search bar inside the mobile menu container. Did you remove the script?

    Best regards,
    Ismael+

    June 11, 2018 at 9:14 pm #971396
    StartSmallDigital

    Hey Ismael,
    Yea, we eventually removed the search bar.
    Thank you.

    June 12, 2018 at 7:41 am #971557
    Ismael

    Hi,

    Thanks for the update. I’m not sure if you still need some help with this though. Please feel free open a new thread. We’ll close this one for now. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Search bar inside burget menu’ is closed to new replies.