how to change height of header space in custom theme

Hi dizzy,

Ummmmm… I better watch what I say here.. lol.

Anyways, how savvy are you with code? Can you copy and paste your entire header.php file over at https://www.pastebin.com?

After you paste the code, click submit, and copy the link from the address bar and post that link back here.

The elements in your header have been hardcoded instead of using CSS styling. Which means we can’t use custom CSS… instead we have to go in and make the adjustments manually.

The only downside to this is that you will lose any of the modifications if you ever update your theme.

– Josh

Hey Josh,
I appreciate you helping out.
I did what you said. The link is below.

https://pastebin.com/2G9gKgz0

I have seen something called child themes mentioned for use when making some change in the code to prevent losing any modifications when updating a theme. Would this be a case for using something like that? If so, could you explain how to go about doing that with this mod for the header?

Regards, TJ

Okay,

Start here to learn about a child theme. Go ahead and setup the style.css file as described. Create a folder in your wp-content/themes folder called something like dailwp-child. Put your newly created style.css file into that directory.

Then, go to your admin panel and you should see your child theme. Activate the theme. Then, any changes you want to make to styles or functions can be placed in this folder, safe from theme and wordpress updates.

I’ll go work on the other thing and post back.

It looks like there is some menu functionality that is also in the header. Right now, I only see the login stuff from the front-end. But in the code it looks like there are two menu containers. Where is your site navigation??

Okay, take this from pastebin and replace the entire code in your header.php with this one. BUT BEFORE YOU DO, copy and paste your current ENTIRE header.php file into notepad BEFORE you paste the new header. This way you will have a backup if it doesn’t work for some reason.

https://pastebin.com/ddjkpnqD

Alrighty then,
I’m not sure where you meant for me to go to when you said go here in your other post. But I found a tutorial on creating a child theme and so I went ahead and did so as per the instructions. It seems like it works. I activate the child theme in admin and it looks just like the original, so I guess it is working.

Yes, the site navigation is in that header area on the right side at the top. There is another optional type nav menu just below the other but I removed it in the admin panel to make more room for the logo.

OK, so next I replaced the entire code in header.php with code from pastbin and now my entire logo can be seen, but the header space has not changed. I had accomplished this before when I was trying to figure out how to increase the height of the header but did not like the way it looked and changed it back.

This is not what I am trying to change, or at least, it’s only part of it. Probably, I’m not explaining what I want to do correctly or I’m describing the wrong area on the page.

I want to increase the height (space) of the white strip that goes across the header area so that my logo will fit within that white space area and blend in with it. The way it is now still looks like the logo does not fit there so I will need to increase that white strip at the top of the page.

At the bottom of the page in the footer area the white strip is 2-3 times bigger than the top one. That is what I would like to be able to make it like at the top of the page.

Sorry.

Try adding this to your child theme style.css file:

#header {
    background: url("images/bg_footer.gif") repeat-x scroll center bottom transparent;
    height: 200px;
    margin: 0 auto;
    padding: 0;
}

That didn’t do anything. Nothing changed. I tried putting it at the bottom of the style.css file for the actual theme also, just to see if anything changed with it like that, but nothing either.

Josh, Have you given up on me?
I guess no other ideas on how to make this happen?
Oh well.
Thanks for trying to help anyways.

Regards~ TJ

Well, I finally got it figured out on my own. So for the benefit of anybody that might be having this same problem and is looking for a solution, I will explain how it is accomplished.

You can remove or replace the background image at line 11 in the style.css file of the theme, and that will make the strip disappear completely or you can change the background image to something else.

Or, as in my case, I just re-sized the original background image that was making the light grey strip in the header area so that it was tall enough to fit my logo in it.

Very simple solution. No need to mess with changing code or make child theme etc. Some times it’s best not to over think things.