Extra white bar below mobile menu

Hi,

In situations like that, create a support ticket ASAP so I can help you out faster. This specific situation just took me 2 minutes to figure it out.

Add the code below to the custom css field in the General settings tab.

#masthead_TesseractTheme {
    margin-top: -38px;
}

Clear the cache and test again letting me know the result.

Ahh sorry I didn’t see where to support a ticket, I have applied that code into the custom CSS and it seems to have made the gap larger? Any more ideas?

That code also cut off a part of my header of the desktop site, What I’m trying to hide is the white bar that only shows in mobile view if that makes any sense? I’ll remove the custom CSS so you can see what it looks like.

It worked fine when I tested it this morning. It seems that you are using autoptimize, purge the cache from that plugin or turn it off temporarily since it can mess the result.

If you use the custom css field in WP Mobile Menu, all the css you have there should only be active when the WP Mobile Menu is visible(determined by the width trigger)

Try again and let me know.

Have added the code to the CSS field in the WP Mobile menu settings and cleared the cache, could you take a look at my site now? It appears to still be messing with the header in desktop view and leaving the white bar in mobile view!

Thanks for getting back to me so quickly

It seems there is an extra 60px that I can’t figure out from where it’s coming. It wasn’t there when I first checked it.

Change the -38px to -98px like I did in the screenshot below.
https://cl.ly/2O2H1I0g0021

And purge again any cache mechanism.
Let me know how it goes.

That seems to have done the trick on the mobile site, however the header has essentially disappeared in desktop view?

This seems to be caused by the cache in autoptimize. So we can confirm this, my advice is that you deactivate autoptimize, clear the cache and test everything again because that custom css should be wrapped with a media query and should only be active in a specific resolution defined by the width trigger.

other option is that you didn’t placed the css in the correct place, can you provide me a screenshot to confirm it is in the right place?

I have disabled autoptimize, cleared the cache and reapplied the custom css and am getting the same results, I am placing the custom css into the ‘custom css’ section of WP Mobile Menu as shown in this screenshot:

https://imgur.com/ujva76G

Not sure why this is affecting my entire site on desktop view, is there someway to only disable the themes mobile header?

I’ve reactivated autoptimize for tonight just so the desktop website is running properly overnight, I’ll retry whatever you suggest when you get back to me ??

Hi guys;
Don’t have info relevant to the problem at hand, but for future reference; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

Have fun,
frank (ao dev)

thanks @frank for the tip will give it a try.
It seems that me and @matthewfennell are in totally different timezones that is slowing down the resolution of this issue(I’m in Portugal).

Let’s try 2 alternatives.

1) Using the hide elements field place this code in that field

.site-header

https://cl.ly/0g0G292W1z43/%5B8c80e7b79e93e8efbb4dd907824863ca%5D_Image%202017-12-22%20at%2011.00.26%20AM.png

2) Replace the old css by this one

@media only screen and (max-width: 1024px){
    #masthead_TesseractTheme {
       margin-top: -110px;
    }
}

Hey there, that hide elements field option worked perfectly, seems the simplest solution was the best! Thank you so much for your help.

Glad it’s sorted. Happy to help.