Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 17, 2017 at 3:34 pm #794920
    gb_plugins1

    Hello

    I used your code from this link to add a search bar to my mobile menu.
    I set – display: none; to the #menu-item-search-mobile to when the menu is not a mobile menu (990px and above).
    The problem is, every time a page loads on desktop screens, the search bar appears for a second, and then disappears once the page is loaded.

    How can I prevent this?
    Thank you!

    May 18, 2017 at 2:26 pm #795894
    Victoria

    Hey gb_plugins1,

    Do you have display: none; set for big sizes?

    
@media only screen and (min-width: 990px) {
.menu-item.page-item-18 { display: none; }
}

    Best regards,
    Victoria

    May 28, 2017 at 11:32 pm #800903
    nickgin

    Hello Victoria,

    I am facing the same issue… every time a page loads on desktop screens, the search bar appears for a second, and then disappears once the page is loaded.

    in functions.php file:

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

    in quick css:

    @media only screen and (max-width: 767px) {
    #top #searchform> div {
    display: block !important;
    opacity: 1 !important;
    }
    }

    and for mobile view quick css:

    #menu-item-search-mobile {
    display: block;
    }

    Could you help me please?

    Thank You in advance,

    Nick

    May 29, 2017 at 1:50 pm #801085
    Yigit

    Shalom Nick,

    Please change the code in Functions.php file to following one

    add_filter( 'wp_nav_menu_items', 'avf_add_search', 3, 2 );
function avf_add_search( $items, $args ) {
if ($args->theme_location == 'avia' && wp_is_mobile())
{
$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;
}

    Best regards,
    Yigit

    June 18, 2017 at 8:20 am #809485
    gb_plugins1

    Hi Victoria,

    I have all the CSS code needed, but it doesn’t solve the problem.

    Thanks!

    June 20, 2017 at 9:57 am #810262
    Victoria

    Hi gb_plugins1,

    Have tried the solution proposed by Yigit? Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    August 8, 2017 at 2:35 pm #835858
    gb_plugins1

    Hi Victoria,

    Yigit’s solution worked. thanks a lot!

    August 8, 2017 at 2:47 pm #835862
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mobile menu search’ is closed to new replies.