Custom Header Foundation Theme

[Brian Davis]

Hi,

I would like to add a custom header to my website.
I have tried to add under the logo tab and this has not worked,
there is no option on the admin panel for header, or am i missing something.

Thanks,

[Bill Robbins]

Brian,

Great question. You can add an image behind the logo if you’d like to. Here’s how to do that.

1. Go to the Media section of your WordPress control panel and select “Add New.”
2. Upload the image you’d like to use as your header. The space that is available in the theme by default is 960 pixels wide by 100 pixels tall.
3. Once your upload is complete, WordPress will give you a URL to that image. Copy that URL.
4. Next go to the theme options page and select the styling tab.
5. Scroll down to the very bottom until you see a box for “Custom CSS.”
6. Paste this into that box:

   
   #header {
   	background-image: url(https://yoursite.com/image.jpg) 
   }
   

7. In the snippet above, replace the http://yoursite.com/image.jpg with the URL to your image that you copied earlier.
8. Save your changes.

That should give your custom header image to go behind your logo. If you need any help, let me know.

Thanks,
Bill Robbins

[Brian Davis]

Hi Bill,

I have added the header behind logo but header size is off, I had header custom designed and the designer claimed header was right size for website, could you please take a look at site and let me know if I can correct?
http://www.purealternativeministries.org

Thank you.
Brian

[Bill Robbins]

Brian,

Try adding this to the Custom CSS box and see if it works better for you.

#header {
	height: 240px;
}

#logo {
	display: none;
}

That should give you more height and it will also hide the image link for the logo since you won’t be needing it.

Let me know if you have any trouble.

[Brian Davis]

Yes, Yes, works great, Thanks so much for your help.

[Bill Robbins]

Glad that helped. Let me know if you need anything else.

[Stephanie Dohar]

Hi Bill,

I specified the height and width of #header in my Custom CSS, however….
I’d like for the full image to show, and not be overlaid with the drop-down menu bar. Is there a way to do this?

Thank you!

[Bill Robbins]

Stephanie,

Great question. The menu bar is 40 pixels tall. If you’ll add that to the height of your image and then use that as the header height you should be able to see the entire image without the navigation bar overlaying it.

If you run into trouble, let me know,
Bill

[PL2VETS]

Bill

Is there any way to add a customized image to the right side of the logo in the header so the logo does not overlap the header image.

Jeff

[Bill Robbins]

Jeff,

You can do that. The easiest option would be to incorporate it into an image logo and then use that option. If you’d like to use a text logo along with the image, you can do that. Here’s what to do:

1. Go to Media section of your WordPress control panel and select “Add New.”
2. Upload your image and once the upload is completed click edit (if you’re using WordPress 3.5) or just copy the URL to your image. If you click edit, look in the right hand side of the screen for a field labeled “file URL” and copy the URL to your image there.
3. Next go to the Theme Options page and select the styling tab. Scroll down to the Custom CSS box and paste this:

   
   #header {
   	background: url(https://yoursite.com/image.png) no-repeat 200px 25px;
   }
   

4. Replace the http://yoursite.com/image.png with the URL to your image. The 200px is the number of pixels from the left your image will be positioned. Change that so it fits where you’d like it to go. The 25px is the number of pixels from the top your image is. You can adjust that to achieve your fit.
5. Save your changes.

That should add in an image next to the text logo. If you have any questions or trouble, let me know.

Have a great week,
Bill

[Author]

Posts