Alternate Header Logo for Mobile Sites? (Lifestyle Pro)

[brightisland]

I'd like to use a wider header image on desktop and other larger screen devices, and then automatically switch to a square logo on mobile devices (like iPhones).

I know how to use a larger header on the desktop site (tweaking the header image size in functions.php and in the regular CSS styling for the header), but I don't know how to tell the site to use an alternative logo for mobile sites.

I know it can be done, because some responsive themes I recently purchased from Pretty Darn Cute Designs have that feature.

In fact, I'm happy to upload my own header images and specify them in the css, I'm just not sure how to do that with Lifestyle Pro.

Thanks in advance.

PS - I haven't included a link because it's a development site and not accessible without a password.

[Brad Dalton]

You can use Media Queries which you'll find near the end of your style sheet Or you can use conditional tags for mobile devices or the wp_is_mobile() conditional tag however CSS is the best solution.

---

Tutorials for StudioPress Themes.

[brightisland]

Well, I had thought about using Media Queries to tell the site to look for a different logo image, but I wasn't sure how I would code that part.

Would I just specify a background-image for the header on mobile devices like this under this section?

@media only screen and (max-width: 767px) { 

...

.header-image .site-title a {
		background-image: url('http://www.website.com/image.png');
	}
}

Or would I need to tell it first not to show the default header image? If so, I'm not sure how to do that.

[Brad Dalton]

You could change the size of the site-header class on different sized devices,

You may also want to change the padding and margins for that theme.

If you wanted to use a totally different image, you would need to remove the default and use PHP code with conditionals for each device. Or a plugin which adds them.

---

Tutorials for StudioPress Themes.

[brightisland]

Thank you for trying to help me out with this.

I installed the plugin, but it appears I'd need to be familiar with php coding to make it work with the site.

Unfortunately, I'm not a php programmer, so that's the problem. I don't know how to write new custom functions. My php-modification expertise is limited to going in and tweaking things like set parameters like width, height, url, etc..

I imagine I would need some sort of if - desktop, then- this, if - screen less than 800px wide, then this - but whenever I try to write php, my site breaks. :-\

That said, what if I just removed the default header image upload function, and then manually set the header image in the css? Then I can probably just use css to use one header image for regular devices, and a different header image for mobile devices, right?

So I guess if that would work, my question is, what part of the custom functions file would I remove (code out /* */) to just use the style sheet for dictating the header image(s)?

[brightisland]

Ok... I think I've sort of got it working, but although it's pulling in the right logo for mobile devices, it's getting chopped off on the sides and bottom.

I've tried to figure out where I should decrease padding/margins to make it display correctly, but can't sort it out.

I've temporarily turned off the passwd protection in hopes of getting some assistance with this.

Here's the link.

Thank you!

[brightisland]

Nevermind... I figured it out.

[Brad Dalton]

So what did you do?

CSS Media Queries or mobile conditional tags?

---

Tutorials for StudioPress Themes.

[brightisland]

Well, the code isn't pretty, so I won't paste it, but in short, I removed the header upload support in the functions.php file, and then used CSS media queries.

I created two separate header images for the desktop site, and mobile browsers, and specified the corresponding images in the regular css and media queries sections. I never was able to get the padding reduced on the header section of the mobile site, but I found a workaround by decreasing the logo size so it would fit.

[Brad Dalton]

Ok. Good to see you worked it out as i know a good solution will be popular with that theme.

If you change your mind about posting the code, you might find Github Gists a good way to host it and embed or link to it as you can then change or update the code if needed.

Thanks for your feedback.

---

Tutorials for StudioPress Themes.

[Author]

Posts