Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #527539

    Hi Kriesi Team!

    I’ve added a search bar to my hamburger menu through pieces of code that I found here in the support forum from previous threads.

    They are the following..

    In the functions.php

    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).'</li>';
    	$items = $search . $items;
    	return $items;


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

    They both work perfectly but now that I have added those pieces of code I’ve noticed that upon loading a page (or refreshing) a search bar appears at the beginning of my main navigation. It disappears soon afterwards but it is still not optimal to see it for a few seconds on every page.

    Please take a look and let me know if there’s any way to resolve this issue.

    Many thanks.


    Hey dialedinmarketing,

    I couldn’t see anything like that on any screen size, in what browser are you getting this error?

    Best regards,


    Hi Rikard,

    Thanks for the reply. I actually just managed to figure out this problem myself about an hour ago. For anyone with this problem as well all I did was add a couple lines of CSS.

    #menu-item-search-mobile {
    display: none;

    and then

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

    under my mobile view media queries.

    Thanks for taking a look! Please close this thread unless anyone else has questions.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Search Bar on Mobile Menu’ is closed to new replies.