Help to customize header in Apparition to be responsive

[samantha]

I have been trying to modify the header on this side: http://www.popfete.samanthaworks.com. In my web browser it looks the way I want it to look, but I know that the way I did it will not format properly on other devices.

I created an image that has the logo on the left, the "Winter Fete" etc. text in the middle, and the same blue colour (as the logo) through to the right, at the exact size of the header for this theme. The nav menu is sitting over the top with the same background colour.

I am guessing that I need to actually use some kind of repeating background, and keep the images separate with correct "float" properties (???) but I'm not sure where to start.

Can anyone give me some pointers? Thanks!

http://www.popfete.samanthaworks.com

[Ozzy]

if you upload an image to use as the header, it won't be responsive.

you can add a smaller image in the #header #title a with the actual logo and give the #header a background of the blue color you're using.

the other thing you can do is at the media query that the widget area goes full width, 768px wide (i think), you can change the .header-full-width #header to a blue blackground and have the #header #title be a smaller image that includes the logo.

---

Ozzy Rodriguez | Twitter | Google+

[samantha]

Thanks Ozzy. I've been playing around with this today. I've experimented a lot, and learned a lot, but still not got it right!

I couldn't figure out the right spot to do this in the media query section, so I tried your first suggestion.

I added background colours to a bunch of places in the header (!) and I also made the changed the actual custom header size to match my logo in my functions.php. If I add the blue background to the title area, it covers up the logo. Also, on a really wide screen or on iPhone, the logo is too far to the left. What have I done?!

This is the code that's currently in the header section of style.css:

#header {
	background-position: top left !important;
	background-color: #2a2869;
	min-height: 178px;
	overflow: hidden;
	width: 100%;
}

#title-area {
	float: left;
	margin: 32px 0 0;
	width: 25%;
}

#title {
	font-family: 'Lato', sans-serif;
	font-size: 42px;
	font-weight: normal;
	line-height: 1.25;
	margin: 0;
	text-transform: uppercase;
}

#title a,
#title a:hover {
	color: #fff;
	text-decoration: none;
}

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	height: 178px;
	overflow: hidden;
	text-indent: -9999px;
}

.header-image #title-area {
	margin: 0;
	width: auto;
}

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a,
.header-image #title,
.header-image #title a {
	width: 100%;
}

#description {
	color: #fff;
	font-size: 16px;
}

.header-image #description {
	display: block;
	overflow: hidden;
}

#header .widget-area {
	float: right;
	background-color: #2a2869;
	height: 178px;
	width: 75%;
}

Do you have any hints for the next step?

Thanks so much.

[samantha]

Problem solved - using a different template 🙂

[Author]

Posts