White space between header and admin bar

Are you using wordpress.com? If you are then you need to get support on their forums.

Nothing is jumping out at me right now. I did see some typos in your code, it’s possible that the problem is due to one of those. If you could should me the code you specifically changed that would help.

Link please?

Here’s a link to the site of OP – https://livestockwelfare.com/revamp/ –> I believe it is the white space above the header that they are trying to remove.

[Moderator Note: Please ensure that you are embedding links correctly in your posts.]

Generically speaking try using Firebug or Chrome’s built in inspector to identify the CSS that needs modifying.

You can see a tutorial for that sort of work at this URL.

https://www.studiopress.com/tips/using-firebug.htm

The white space should be controlled via the CSS of your theme.

More specifically from the link it looks like you mean this theme:

https://cyberchimps.com/store/business-pro/

Which looks like it’s supported at the Cyberchimps site.

https://cyberchimps.com/my-account/

Commercial products are not supported in these forums.

Thanks for the points all, and sorry I forgot to originally add the link.

While I’m not a user of Firebug, I’m thoroughly attached to Chrome’s code inspector. Only problem is, this little block of white seems to be outside of any of the coded areas, so I can’t find what CSS is applying to it.

Good point on the commercial theme. I’ll take it to their forum, see if I can get any help. Although they’ve mentioned they don’t support theme hacks, which I believe this one falls under (since I’ve been editing the core files). I’m fairly certain this is a PHP issue, that I’m just missing.

Thanks for your help!

P.S. – Wen, can you point out the typos? I was wondering if I’d created an error somewhere by missing a few characters, but I’m not seeing it.

If you are in Firefox and you are using Web Developer Extension -> CSS -> display style information and then click on the different parts of your site it will display the styles that apply to that section. This is good because it shows you, separately, the styles in the parent css and the styles, after that, from the child css. I feel like maybe you were missing a colon or something here or there. To be honest I didn’t spend that much time looking at it. If the white space wasn’t there before then you’ve done something to add it. It can be frustrating and time consuming but you might want to copy your child theme style.css into a text editor and then deleting it all. Then go and add each css change into the child theme one at a time and then check to see what it impacts (or doesn’t impact) or breaks, etc. Sometimes when you’ve been staring at something frantically for hours you can’t see the trees for the forest ?? I usually wind up finding a missing bracket or something that should have been obvious. Good luck!

For reference…I figured out what it was.

I had tried to add the meta viewport within the wordpress theme header file, in between the php tag for “wp_head” and the “title” tags. Then, when I commented it out (because I found another viewport tag in another location that I was testing), I commented it out with the wrong comment type and it broke it.

<?php wp_head(); ?> <!-- wp_head();-->

/*<meta name="viewport" content="width=device-width, initial-scale=1">*/

<title>
 <?php wp_title(' '); ?>
 <?php if(wp_title(' ', false)) { echo '|'; } ?>
 <?php bloginfo('name'); ?>
</title>

It seems that most browsers read that and add in the extra space, but chrome doesn’t. Very curious indeed.

Anyway, fixed now. Thanks for your help! Pulling out the code inspector helped a touch! Once I started fiddling with the css, I saw that the whitespace wasn’t outside of the body, but was actually in the header, and the led me to look in the troublesome folder.

Cheers!