Header responsive issue

Hello,

I created my menu, but I am having a problem with responsiveness.

On desktop, it works ok, but when I shrink the browser screen to less than 1024px width I get a large white space under the header.

This is the CSS that is causing it:
<header class=”whb-header whb-sticky-shadow whb-scroll-slide whb-sticky-real whb-hide-on-scroll whb-sticky-prepared” style=”padding-top: 140px;”>

That padding-top:140px doesnt change to 60px when making the browser window smaller.

Can you please help me.
Thank you

Hello,

The header switches to the mobile view on this point 1024px.

Please navigate to Woodmart > Header builder http://prntscr.com/iyd2pe

Switch to the mobile view of your header http://prntscr.com/iyd3v3 check all the rows there.

Hide the rows which are not applied https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

Best Regards

I am sorry, but this doesnt solve the issue
My header is built correrctly, but the theme code is adding 140px height when it should not add it.

Hello,

Please provide your site admin access so that I could check the settings.

Best Regards

I am sending you the admin details.

That white space the header creates on the bottom with 140px is visible if you make the browser window smaller, and also on tablets.

Not sure why it happens.
In desktop with the browser smaller, if you reload the website changes from 140px padding-top to 60px, but that doesnt happen in tablets, its always visible.

I am guessing the theme is adding that 140px padding-top using AJAX, but instead of rewriting the padding-top to 60px when the browser screen is smaller, it keeps the 140px until you reload again. It should be dynamic, and change that padding-top on the fly depending on browser width.

THANK YOU!

Hello,

You are narrowing the browser to the iPad size. As soon as you make the window narrow, reload the page or check the site on real devices. You will see that there is no problem.

Best Regards

I understand what you are saying, but users sometimes make the browser window smaller to fit other windows on screen.
The problem is that in your demos, that doesn’t happen. Only on my website.

Also, on the iPad pro 13inches that space is always visible, even after reloading.

For example, in this demo that problem is not visible:
https://woodmart.xtemos.com/demo-digitals/demo/digitals/

Hello,

I do not see any problem https://prnt.sc/obrgoz

We have tested also on the Ipad, please provide the screen from the real devices.

Best Regards

No, un your demo their is no problem. Only on my website. That is what is so strange.

Did you test in iPad 13 inches?

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile/Tablet:

.whb-header.whb-sticky-real {
    padding-top: 60px!important;
}

Best Regards

OK,
I found the problem.
In the header builder, if I deactivate stickiness, the header works perfect, with no issues on desktop or tablet.
If I activate Stickiness that big white space is visible.
So, there has to be a problem with how the theme makes the header sticky.

The code you sent me, solves how the header works on vertical view on tablet, but when you switch to horizontal the header overlaps the content, so it fixes something, but it breaks something else.

I am attaching 2 images, one with the header option “sticky” activated, and one without.

Found the problem.
The issue with the header builder, is that if you set a different height for the row when its sticky, the theme still uses the padding-top from the original header height, instead of changing it to the padding-top it needs from the height you specify in the option “Row height on sticky header”.

Found solution, This fixes your header problem:

@media only screen and (max-width: 1024px) {
.whb-header {
margin-bottom: 40px!important;
}
.whb-header.whb-sticky-real {
padding-top: 100px!important;
}
}

The problem, is that the space alocated for the header-bottom in the header builder, is not substracted in the CSS, so the theme hides that header-bottom but it leaves a white space that is equal to its height.

Hello,

Please provide your site admin access.

Best Regards

here they are

Hi,

Try to remove all previous header related custom code and add the following CSS code snippet to the Global Custom CSS area.

.whb-header.whb-sticky-real.whb-sticky-prepared {
	padding-top: 140px !important;	
}

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

.whb-header.whb-sticky-real.whb-sticky-prepared {
	padding-top: 100px !important;
}
}

Regards

[Author]

Posts