rqmellis

That is very strange! Until this morning, my iPhone always displayed a lot of padding above the logo (I have been working on this for about a week). I think it’s working now. One final question. I am working with the following CSS, but I don’t fully understand what each section does:

@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 40px 5% 25px 5%;
}
}

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 20px; } }

What is the difference between “.site-header” and “.admin-bar .site-header”? Is there some redundancy/unnecessary code here?

Thank you so much for your help and patience!

I am working with the following CSS:

@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 0px 5% 25px 5%;
}
}

.admin-bar .site-header {
padding-top: 0px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

If you go to the site now, you will see that there is no padding above the logo in full-screen mode. But when the screen size is reduced, it looks like the image you sent me previously, with a lot of padding.

Unfortunately, that didn’t work either. Here is everything I have for the header:

@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 0px 5% 25px 5%;
}
}

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

The only other thing I can think of is that I modified the header PHP (in a child theme) to remove the sidebar. Do you think the problem could be there?

Thanks for the help!

We do see the same thing. I’m trying to over-ride that 70px and change it to, say, 20px. I am new to WordPress/CSS, so I am doing this by trial-and-error. I thought the CSS where you say I have an error would do that, but it doesn’t. Could you please tell me what the error is?

Also, it seems the code to change the header padding on a large screen is:

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

But it isn’t working for me on a small screen.

Thanks again for your help.

Thannk you for following up. Unfortunately, I have not been able to figure this out. On a large screen, I can position my logo at any desired distance from the top (include 0px). But on a small screen, the distance is large, and no matter what I try, I can’t seem to adjust it.

Here’s what I’m currently trying in my child theme:

.site-header
@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 0px 5% 25px 5%;} }

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

.admin-bar .site-header-inside {
top: 0px; }
@media (max-width: 768px) {
.admin-bar .site-header-inside {
top: 0; } }
@media (min-width: 769px) and (max-width: 782px) {
.admin-bar .site-header-inside {
top: 0px; } }

It seems the .admin-bar .site-header padding controls the position of the logo on a large screen. But I can’t figure out what controls it on a small screen.

Any help would be greatly appreciated!
metabias.com

Even if I uninstall the original plug-in? WordPress won’t let me install the beta without uninstalling the old one.

Thanks for getting back to me, Peter.

I tried the CSS patch, but that didn’t work. Is there an easy way to save my admin options before installing the beta? I made a lot of changes in the admin panel that I don’t want to lose.

Thanks again!

Thanks for getting back to me. I figured out the problem from another post. If there are not enough pages on the site set to “public” viewing, that section of the Reading Settings doesn’t display.