Going Green Header & Menu CSS Problem

[ZachE]

Hi all,

This is the site I'm working on: http://doctorklaper.com/wp/

I'm having adding a responsive header image -- whenever I add my 680x140 image (image here: http://doctorklaper.com/wp/wp-content/uploads/2013/11/KlaperHeader_680.png) only part of the image shows up in the header, and the location of it changes whenever the screen dimensions change. Ideally, i'd like the header image to be centered on all pages.

Also -- I wanted to add my primary menu below my header -- which I've done through some hooks in functions.php but there is a layer of transparent white above -- any ideas how to fix that? I've got the secondary menu in the footer and it has the same transparency issue.

Thanks all!

-Zach

http://doctorklaper.com/wp/

[nutsandbolts]

Okay, a couple of things:

(1) You'll need to add a width and height to your CSS for .title-area - that's why you're only seeing a small part of the image.

(2) To center the header image, remove the image in Appearance > Header and add the following to your stylesheet:

.site-header .title-area {
background: url(http://doctorklaper.com/wp/wp-content/uploads/2013/11/KlaperHeader_6803.png) center no-repeat !important;
}

(3) If you remove the background image from .site-inner .wrap the menus will show the green background.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ZachE]

Thanks so much, Andrea! Those suggestions are great.

I ended up doing your second suggestion, but the only problem was that as I reduce the resolution of a page, most of the content shrinks, but the logo stayed the same -- and on mobile it was too large. By uploading to the Appearance > Header function it automatically re-sizes everything.

I really don't know if there is an easy way to resize it directly through the CSS but if you have any thoughts I'd love any other assistance.

Thanks again!

-Zach

[nutsandbolts]

Looks like it's resizing now - did you get this resolved?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ZachE]

Yes I did -- thanks again for your help!

-Zach

[ZachE]

This reply has been marked as private.

[Author]

Posts