White Space in between header Ad Code and Nav Bar

Hello Friends,

Am messed up with my site, I downloaded a Plugin for HTML,CSS, JS Minification for WordPress and after running it site there’s a white space geenrated between Navbar and Header Ad Code, I tried manipulating the CSS, Even then it isnt working. The WordPress theme is based on Redux Framework. Attaching a Screenshot do checkout.

Issue persists at [https://innovativeblogger.com] Please do help me out
Tried Manupulating CSS, It worked in Debugger but not in theme, Please help me out!

It seems like you have solved your problem, thats right? as I do not see the white space at your live site.

Nope, It’s Still there @MEGA , Could you help me in fixing the issue.

Thanks for the reply.

If I’ve understood your issue correctly, the problem is the min-height applied here:

<div class="nav-bar-outer" style="min-height: 342px;">

Removing or reducing that reduces the white space.

@TechnoBear Where do I change this That’s a WordPress Theme, I just went in to WordPress → Appearance → Editor and went to INDEX.PHP and there’s nothing over there showing this div line.

Where Can I find that line ?

if you dont mind cant i ask a ques.

Post edited by TechnoBear to remove fake signature

Yea @brookbuckler360 . I tried Solving It by my own, But couldnt find out the root cause. In chrome Debugger it is showing like that but in Index.php there are few PHP lines.

Good question.

I’m seeing that as an inline style in Firebug, but when I went to double-check on Chromium, I’m not seeing the same white space at all.

Firefox:

Which browser(s) are you seeing the white space in?

Chromium:

Do check it once again in chromium too, cos am playing with those css classes, clear the cache and clear recent data and check it once again. @TechnoBear

Am seeing White Spaces in SAFARI as well as FireFox for MAC.

I have to go just now. I suggest you start by running the page through the validator and fixing the errors, as that may be the reason for differences between browsers,

@TechnoBear The total Output is being shown in HTML, CSS, BOOTSTRAP in Debugger but in Editor all I do have is PHP CODE. I dint find this code anywhere.

As far as I can tell, the problem stems from the JavaScript being used for the “sticky” nav-bar. That’s not my area of expertise, so I can’t really help further. The minified code makes it extremely difficult to see what’s going on, and I’m not a WordPress user. Firefox and Chromium dev tools are showing different min-height values, which explains the difference between the two renderings, but not why this is occurring.

As I said before, the first step to debugging would be to eliminate coding errors.

2 Likes

The problem seems to be caused by the method you are using to include the css:

<link type="text/css" media="all" href="https://innovativeblogger.com/wp-content/cache/autoptimize/css/autoptimize_9b326d6258c2a89311e990647700d928.css" as="style" onload="this.rel='stylesheet'" rel="preload" />

I don’t believe the onload works properly for link elements in Firefox and it seems that the height of the sticky nav is dynamically calculated before the css rules have been applied and without styling the height is a massive 342px.

If I copy your page and put the css in the head of the page as normal Firefox works fine.

I don’t know enough about the preload technique (or why indeed its needed) but perhaps this SO answer has some hints or you may need to ask in the JS forum for a more foolproof method of whatever the code is trying to achieve.

Once you start fiddling with the normal methods of delivering css you will run into problems.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.