Giant Whitespace appears on mobile under menu

benfromalaska

Hello.

My menu and spacing works just fine on desktop and tablet, but when it comes to mobile a giant whitespace appears everywhere other than on the homepage where the slider is. I can't seem to find a setting that will get rid of this whitespace without making the content slide underneath the main header. Please assist! Thanks!

http://60l.859.myftpupload.com/ 

Pablo

Hello,

Please go to the Theme Options > Header & Subheader > Header and turn on the minimalist option.

see the screenshot:

https://prnt.sc/ria7l3

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

benfromalaska

Hello,

I tried that, but now all of the pages excluding the homepage are now overlapping with the header at the top. 

I left that setting on for you to be able to see what I mean live. It's every page excluding the home page, but these examples are the easiest to see what I mean. 

http://60l.859.myftpupload.com/free-move-or-gift-card-offer/

http://60l.859.myftpupload.com/featured-properties/monaco-on-the-trail-dallas-tx/http://60l.859.myftpupload.com/frequently-asked-questions/

It appears to solve the problem on mobile, but not on desktop and tablet.

Please assist. Thanks!

Pablo

That's because you are using the "Transparent" type of header which is does not have any height applied that's why the content is overlapping it.

This type of menu is usually used in the one-page websites where the revolution slider is on the beginning of the website.

To solve that, you should set other header style, like "Classic"

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

benfromalaska

So you're saying there's no way to have a transparent header on the website that can still responsively account for spacing? I've never had that issue with other themes before. What's the workaround? Custom CSS for the homepage and a white header for the remaining pages?

Pablo

The only workaround here is to insert in the first section a divider item with some height value (about 50px)

https://prnt.sc/rjiee4

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

benfromalaska

Thanks. I found a way to fix it after you told me the reason it wasn't working. I updated the main theme options to use the classic header, then created a custom layout for that uses the transparent one and applied it only to the homepage. All the spacing seems to work and any random landing page I want to use an opening revslider can just have that custom layout flipped on. Thanks for helping in the direction to go in and there's the answer for future reference.