Extra padding added to top when shrinking header

BB Theme
1

I think a bug may have been introduced in v1.5. I’m using a header with “Nav Right”. When I shrink the browser window to the point that the nav items move to below the header logo area, a 70px padding-top is added above the header logo area. See pic:

header screen shot

This is reflected in the markup as inline styling:
<div class=“fl-page” style=“padding-top: 70px;”>

The inline style=“padding…” goes away when I grow the window again.

I found in theme.js a function: _shrinkHeader (dated as “since 1.5”) which seems to add the padding to the top in this line:
$(’.fl-page’).css(“padding-top”, totalHeaderHeight);

I can’t find any other PHP function that emits the “fl-page” inline style.

I’m not sure what is really going on, but I don’t remember this happening before I updated to the latest version 1.5.

One other interesting thing: if I refresh the page, the padding goes away and it looks correct. It only seems to happen when one actually drags the browser window and resizes it. Thanks.

2

Hey Ray,

I am not seeing this when I ran a test using a similar setup. Is it possible for you to provide us with your site URL so we can take a closer look?

Jun

3

[Content Hidden]

4

Hey Ray,

The problem only happens if you squeeze the browser. If you set the width of the browser to 992px, then visit the page(or refresh it if you’re already there), you won’t see the problem. Or if you can visit the site on an actual device that has a width of 992px, you won’t see the problem.

I’ll go ahead and file an enhancement report for this one though, as I think we can do something about it. Thanks for the heads up! :slight_smile:

Ben

5

Thanks for your reply. I would encourage you to fix it though - because I don’t think it’s uncommon for a user to resize their browser and it does not take much to make it happen. A 992px width is right in the adjustment zone of many monitor resolutions.

6

Edit: To clarify my previous comment: by “adjustment zone” I meant that many desktop monitor sizes range from 1200 to 1900 px (or larger) and a user is likely to adjust browser windows to split their screen or use the Windows-Key+RIGHT/LEFT arrow shortcuts to auto-size the browser to half the screen width. The problem appears in those cases. In any case, thanks for your support!

7

Hi Ray,

This has been fixed and will be available in the next update. If you can’t wait, I am happy to apply the fix for you. All I will need is FTP access.

Thanks,
Danny

8

[Content Hidden]

9

Hi Ray,

To apply the fix, connect to your server and navigate to /wp-content/themes/bb-theme/js/. Once there open the theme.js file in your code editor and replace the entire contents with of the file with the following:

CloudApp

Thanks,
Danny