Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #499328

    Hi guys, let me say first, enfold is one of the greatest themes i´ve ever worked with. But i´ve got a problem and hope you can help me fix that.

    I wish to add the search icon to the mobile menu. I´ve tried some codes posted here in the forum but nothing works. Can you give me instructions to get the search-function into the hamburger menu?

    Best regards,
    Andy

    #499429

    Hey metasec!

    Have you tried this out? https://kriesi.at/support/topic/search-box-in-mobile-responsive-menu/

    Regards,
    Elliott

    #500286

    Hi, thanks for the quick reply . The codes I have tested but unfortunately it does not work . The magnifying glass do not appear on Iphone or Android… Neither in the normal menu as well as in hamburger menu… Did you have any other ideas?

    Regards,

    Andy

    #500518

    Hi!

    Go ahead and add it in and let us know when your done so we can take a look.

    Cheers!
    Elliott

    #500537

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .avia-menu.av-main-nav-wrap {
        display: block!important;
    }
    .av-main-nav > li {
        display: none;
    }
    li#menu-item-search {
        display: block!important;
        right: 100px;
    }}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Regards,
    Yigit

    #501532

    Thanks for the tip! Unfortunately, the whole menu disappears to PC and tablet. The magnifying glass is only seeable, when the hamburger menu appears (on smartphones and tablets in vertical format).

    Regards,

    Andy

    #501553

    Hey!

    Please change the code to following one

    @media only screen and (max-width: 990px) {
    avia-menu.av-main-nav-wrap {
        display: block!important;
    }
    .av-main-nav > li {
        display: none;
    }
    li#menu-item-search {
        display: block!important;
        right: 100px;
    }}

    I realized that i forgot to add media queries to my previous code :)

    Best regards,
    Yigit

    #502121

    Hi , I have tested it . The menu is back but the magnifying glass is gone again…

    Best regards,
    Andy

    #502847

    Hi!

    It seems to be working fine on my XAMPP setup. Can you please leave the code in so we can check it on your site? Every time I visit your site you have removed it so I cannot see what the problem is.

    Best regards,
    Elliott

    #502855

    Hi,

    no problem. Here we go. Code is in and still no magnifying glass on the mobile phones…

    Hope you got any idea?!

    Regards,

    Andy

    #502866

    Hi!

    try this code:

    @media only screen and (max-width: 989px) {
    .responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
      display: block;
    right: 300px;
    }}
    

    and adjust as needed.

    Regards,
    Andy

    #502882

    Sorry, but this code is not working. The magnifying glass is not there an the hole menu an the hamburger menu is seeable. On phone there is a lot of white space beetween the logo and the hamburger menu…

    Maybe it ist easier to put the magnifying glass in the hamburger?

    #503577

    Hey!

    Do you mind creating a temporary admin login and posting it here privately so we can look into it?

    Cheers!
    Yigit

    #503901

    Hi, no problem. Her we go…

    #504504

    Hi!

    I’m having a bad connection day so I can’t access the dashboard. Anyway, please add this in the 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).'</li>';
    		$items = $search . $items;
    	}
    	return $items;
    }
    

    After that, go to the Quick CSS field then add this code:

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

    This will render a search box inside the mobile or hamburger menu.

    Cheers!
    Ismael

    #816235

    Hi Ismael,
    thanx for the code. it works like charm.
    Is it also possible to add the search-icon after the menu items. At the moment the search-icon displays in front/first element of all menu items inside the overlay menu.

    Would be nice if you have a solution.

    best regards
    Ruben

    #816747

    Hi,

    I checked your test site however i cannot see search icon on your mobile menu.
    Can you please post a screenshot showing the changes you would like to make? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here

    Best regards,
    Yigit

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

You must be logged in to reply to this topic.