Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • September 7, 2015 at 4:08 pm #499328
    metasec

    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

    September 7, 2015 at 5:36 pm #499429
    Elliott

    Hey metasec!

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

    Regards,
    Elliott

    September 9, 2015 at 10:39 am #500286
    metasec

    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

    September 9, 2015 at 4:14 pm #500518
    Elliott

    Hi!

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

    Cheers!
    Elliott

    September 9, 2015 at 4:48 pm #500537
    Yigit

    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

    September 11, 2015 at 11:21 am #501532
    metasec

    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

    September 11, 2015 at 11:48 am #501553
    Yigit

    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

    September 12, 2015 at 3:30 pm #502121
    metasec

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

    Best regards,
    Andy

    September 14, 2015 at 3:47 pm #502847
    Elliott

    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

    September 14, 2015 at 3:53 pm #502855
    metasec

    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

    September 14, 2015 at 3:59 pm #502866
    Andy

    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

    September 14, 2015 at 4:24 pm #502882
    metasec

    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?

    September 15, 2015 at 5:59 pm #503577
    Yigit

    Hey!

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

    Cheers!
    Yigit

    September 16, 2015 at 10:24 am #503901
    metasec

    Hi, no problem. Her we go…

    September 17, 2015 at 6:01 am #504504
    Ismael

    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

    July 4, 2017 at 10:43 am #816235
    Ruben

    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

    July 5, 2017 at 2:39 pm #816747
    Yigit

    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

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