Search Form obscures Hamburger on Tablets and Mobiles

Hi @1waytoheaven,

Thank you for using Neve theme!

Can you, please, provide a link to your site so we can check and better assist you on this issue?

https://www.born-again-christian.org/news/

Thank you, I’d like to get this fixed as most visitor use mobiles and tablets.

Note: We do not allow right-clicking, on purpose ??

• This reply was modified 3 years, 8 months ago by 1waytoheaven.

I would add, I updated to “Neve” theme from another theme which +did+ use a search form that only appeared on mobiles, so perhaps when I installed and activated “Neve” theme… it tried to “mimic” that behaviour? (I don’t know, just a thought.)

I’m on a LiteSpeed server, and use Litespeed cache plugin.

I have of course tried flushing all caches, and purged Litespeed, and even deleted the previous deactivated theme.

The bug was present yesterday (on the earlier “Neve” version) and is still there today on the updated “Neve”.

Just getting rid of the seach form, to stop it appearing on mobile and tablet screens would be a great help. ??

I have also set up a child theme for “Neve”, but have not made any changes to how “Neve” itself works, I just have it ready if required.

I appreciate your help.

Hi @1waytoheaven,

We usually do not provide custom coding, but we will consider it this time.

In order to get rid of the search bar on Mobile and Tablet, please try adding the following lines into Customizer -> Additional CSS:

@media screen and (max-width: 500px){

.is-menu-wrapper {
   display: none !important;
}

}

Please let us know if this solved the issue.

Thank for your help.

I placed the css as you suggested, and purged all caches.

That code has done the trick on mobile-size screens, but on tablet-size screens I still see the overlap of the search form on top of the menu hamburger.

You can test the live site yourself, and see what I mean.

https://www.born-again-christian.org/news/

Perhaps the Additional css code needs tweaking a little to include tablet-size screens?

Kindly advise ??

Hi @1waytoheaven,

Can you please try this one instead?

@media only screen and (max-width:480px){

.is-menu-wrapper {
   display: none !important;
}
	
}
@media only screen and (min-width: 481px) and (max-width:768px){
	
.is-menu-wrapper {
   display: none !important;
}

}

Thank you for your patience.

Thank you for that suggestion, which I have put in “Additional css”, in place of the previous suggestion. I then purged caches, but the result is the same as the previous code, ie. the search form still sits on top of the hamburger icon on Tablet sized screens (mobile size works fine).

You can see that code’s effect here, by resizing your browser viewport, if you are on a desktop like me;

https://www.born-again-christian.org/news/

Note: In case this makes any difference; I have the Neve proprietary Child theme activated, so I’m using that to add your suggested “Additional css”.

Thank you for your continued help ??

Progress Update:

1) Whilst awaiting your response, I noticed that using the “Additional css” code that you suggested above, its addition causes all my ‘Pages’ to lose their header images!

To be clear, as well as ‘Posts” I have over 90 ‘Pages’ such as those in the Top menu, ie. Register, Login, About, Healing, etc.

The site ‘Posts’ do NOT lose their header images when I tried your Additional css code.

So why would using your ‘Addtional css’ in the theme cause this?

And how do I fix it?

2) To stop the search form overlying the hamburger icon, I experimented with different max-widths in your suggested code, and found that a max-width: 910px DID stop the search form appearing on tablets. So I have left the Additional code like that. I only guessed, by trial and error.

However, with this code in-situ, the hamburger icon does NOT action! (It did action previously if you clicked theedge sticking out from under the search form.)

So this is the code I now have in the Neve Child theme Additional css;

@media only screen and (max-width: 480px){

.is-menu-wrapper {
   display: none !important;
}
	
}
@media only screen and (min-width: 481px) and (max-width: 910px){
	
.is-menu-wrapper {
   display: none !important;
}

}

3) As well as fixing 2) properly, we also have to get the header images back on my ‘Pages’ in the top menu, please

I appreciate your diligent assistance ??

It’s a nice theme, I’d like to keep it, but we must fix these bugs quickly.

• This reply was modified 3 years, 8 months ago by 1waytoheaven.
• This reply was modified 3 years, 8 months ago by 1waytoheaven.
• This reply was modified 3 years, 8 months ago by 1waytoheaven.
• This reply was modified 3 years, 8 months ago by 1waytoheaven.
• This reply was modified 3 years, 8 months ago by 1waytoheaven.
• This reply was modified 3 years, 8 months ago by Yui.

I have requested help from Ivory Search and given this thread url for reference.

In order for them to see the overlap on Tablet screens I have reverted the max-width: 910px to max-width: 768px otherwise they won’t know what we are trying to fix here ??

I’ve not had any reply from the Ivory Search support yet.

My guess is the root problem is with how themes integate with the WP Theme Customiser, when switching from an old theme to a new theme in Live Preview mode.

If a person’s old Theme has some code in it that a new theme does not support, then the WP Customiser “attempts” to duplicate the feature, but can’t do so without bugs like we have encountered here.

Waiting for you all to respond… ??

In the meantime, I dug out this article from the Neve Dcs which shows how to get the Header images to display on Pages (for some weird reason they are disabled by default in Neve theme!)

https://docs.themeisle.com/article/1263-neve-how-to-display-the-featured-image-on-pages

I put the code in the functions.php file of my child theme and it worked as it is supposed to ??

So that is bug 3) fixed, I’ll now try to stop the search form obscuring the hamburger icon on tablets.

First I’ll try using the width: 910px code I found worked above… lets see…

Yes ?? The search form is now blocked in Tablet and Mobile at the top.

So we have managed, but not sure if that has properly resolved the bug. So I’d appreciate your comments on the 910px size, which I guessesd by trial and error.

Whilst awaiting your reply, I’ve tested the hamburger icon in Safari and FF.

Clicking the hamburger icon on the site homepage does nothing, there’s no action.

Only when you click through to the full article does the hambrger icon act when you click it.

So still not working properly yet.

Edit:
The homepage mobile hamburger not working bug:

I have now found is due to JS/CSS Combine in LiteSpeed Plugin’s Optimization pane. I’ve disabled Combine JS/CSS for now, I can identify the exact JS causing it, and later on, exclude it in LiteSpeed>Exclude

Posting this to help others… and save you headaches ??