Thanks Ismael. 25px made the input a little too tall. But I used 20px and lowered the padding on #top #s to account for that.

The only thing I ran into is where the search form displays on the actual search results page it is now too small (see the link below). Is there a way to target the height/padding/size of that and make it something different than the size of the search in the header?

Thanks for the link Ismael. I’m not 100% sure after reading through it what code I should replace in the avia.js file. But I think it is this:

		//toogle hide/show for submenu items
		$('.html_av-submenu-display-hover').on( 'mouseenter', '.av-width-submenu', function (e) 
		{ 
			$(this).children("ul.sub-menu").slideDown('fast');	
		});
		
		$('.html_av-submenu-display-hover').on( 'mouseleave', '.av-width-submenu', function (e) 
		{ 
			$(this).children("ul.sub-menu").slideUp('fast');	
		});
		
		$('.html_av-submenu-display-hover').on( 'click', '.av-width-submenu > a', function (e) 
		{ 
			e.preventDefault();
			e.stopImmediatePropagation();
		});
		
			//	for mobile we use same behaviour as submenu-display-click
		$('.html_av-submenu-display-hover').on( 'touchstart', '.av-width-submenu > a', function (e) 
		{ 
			var menu = $(this);
			toggle_submenu( menu, e );
		});
		
		
		//toogle hide/show for submenu items
		$('.html_av-submenu-display-click').on( 'click', '.av-width-submenu > a', function (e) 
		{ 
			var menu = $(this);
			toggle_submenu( menu, e );
		});
		
		
		function toggle_submenu( menu, e )
		{
			e.preventDefault();
			e.stopImmediatePropagation();
			
			var parent  = menu.parents('li').eq(0);
					
			parent.toggleClass('av-show-submenu');
			
			if(parent.is('.av-show-submenu'))
			{
				parent.children("ul.sub-menu").slideDown('fast');	
			}
			else
			{
				parent.children("ul.sub-menu").slideUp('fast');	
			}
		};

And it should be replaced with this:

// close mobile menu if url is the same
$('.html_av-submenu-display-click').on( 'click', 'a', function (e) 
{ 
	e.preventDefault();
	e.stopImmediatePropagation();

	var loc, cur;
	loc = window.location.href.match(/(^[^#]*)/)[0];
	cur = $(this).attr('href').match(/(^[^#]*)/)[0];

	if( cur == loc ) {
		burger.parents('a').eq(0).trigger('click');
	} else {
		window.location.href = $(this).attr('href');
	}

	return false;
});

If you could confirm that for me, that would be great.

Hi Ismael,
I was able to find the CSS that targeted the space under the current menu item and adjusted the bottom margin:

#av-burger-menu-ul li.current-menu-item a {
	margin-bottom: -45px !important;
}

It’s displaying fine now.

Hi Vinay,
I tried clearing my browser cache/history, but I still see the space in the screenshot. I also notice the hamburger menu isn’t always clickable. I have seen that on both my phone as well as in my web browser.

Thanks Rikard. Is there a way to specifically target the menu item for the section you are in for the mobile menu? I think it is inheriting some formatting from the main menu and when you open the mobile menu again after clicking on one of the main sections, there is a large space under the corresponding menu item. I’d like to not have that appear and have the spacing stay the same in the menu, no matter where you are.

I was able to fix the display of the mobile menu text and make it so you can click on it. But the hamburger/close menu icon is not positioned where it was in the old version of the website and there is extra space above where the menu links are displayed. I’m having problems adjusting both of those things. If someone can help me with those, it would be appreciated.

I found some back-ups of older versions of the theme that were between 3.8.4 and 4.4.1, but wasn’t able to find one that gave me the additional CSS option and the old version of the menu. So if someone could have a look at the mobile version of the menu and help me fix it, that would be great.

Hi Rikard,
Is there a version of the theme that is newer than 3.8.4 available, that doesn’t have the changes to the mobile menu, but does have under “Theme Options” > “Layout Builder” the option to show element options for developers? The reason I updated it was so I could add specific CSS classes to the elements/containers used in the layout. I’d be fine with rolling the theme back to an older version if it still had that option.

After my previous post I decided to look through all the theme options to make sure all the settings were the same for both English and French. Under “Performance” > “Disabling of template builder elements” on the French theme options, “Load Only Used Elements” was selected and I changed that to “Always Load All Elements” and now it looks like the French home page is displaying correctly. So either that did the trick or you happened to make a change that fixed it.

Awesome! Thanks for the help Ismael.

Thanks for the help with that @guenni007. That worked great and he search is showing up now, only it’s over top of the secondary menu and not displaying right after it. But I’ll have a look at that to see what may be causing it.

I’m still going to look at replacing the magnifying glass to keep things consistent with the design I have been provided by our client.

Hi Ismael,
It looks like that didn’t work. I set-up a login for you and the details are in the private info.

Thanks Ismael. Am I correct to assume I need to check off “Append search icon to main menu” after adding the code? If so, I did that but this code is displaying now in the header:

a href=”?s=” rel=”nofollow”>

Just in case this make a difference, there is a WPML language switcher link right after the secondary menu and it’s right after that where I need to add the search.

Is it also possible to display the actual search field/button instead of just the search icon? See below:

• This reply was modified 6 years, 4 months ago by NicomIT.

Hi Ismael,
In the WP dashboard of the website, the full piece of code for the form is under “XYZ PHP Code” > “PHP Code Snippets”. There are four code snippets there and “Job-Application” is the one for the English version of the form. If you click the pencil icon in the “Action” column, you will be able to view the actual code. I copied/pasted as you requested as well. The URL is in the private data. The form was coded by one of our developers. It works fine when tested on it’s own, but we are having this issue when we place it in the page in the actual website using WordPress. It had worked previously in the website.

Sure, the login details is in the private content info.