I am working on testing my site to troubleshoot any responsiveness issues and I am noticing a big one that I can’t seem to correct. Here is the dev site: https://terranaut.staging.wpengine.com. When you shrink the width of the the browser window the header and Rev Slider adjust correct but then a gap the height of the header (130px) appears and I can’t get it tightened up. I know it has something to do with the value I have entered under the theme settings > Header Options > Header Height but without that value the header get super small. I have been able to force the header back to the correct size using CSS but then the mobile menu doesn’t appear correctly. How do I get rid of this gap? I found a similar item in the forum but there was no response, https://support.codeless.co/?action=bbp-search-request&bbp_search=gap+below+header. This is the last thing I need to get situated before I can push the site live so please let me know what needs to be adjusted as soon as you get a chance. Thank you.
The 130px space looks like an additional code. Did you perhaps added custom css to style the top wrapper? Or maybe a plugin have added it. However, the code above will fix the space in responsive. Clear cache and refresh pages after saving.
Let us know.
I did try to add additional code when I was working on finding a solution on my own but I removed it because it wasn’t working properly. Your @media suggestion didn’t work exactly but it did make me think to try adding the CSS I was playing with yesterday to the media tag and it worked perfectly. Here is what ended up doing the trick:
