Community Forums › Forums › Archived Forums › Design Tips and Tricks › Alternate Header Logo for Mobile Sites? (Lifestyle Pro)
Tagged: css, header, image, Logo, responsive
- This topic has 9 replies, 2 voices, and was last updated 10 years, 9 months ago by
Brad Dalton.
-
AuthorPosts
-
May 19, 2014 at 9:37 am #105865
brightisland
ParticipantI'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.
May 19, 2014 at 9:40 am #105866Brad Dalton
ParticipantYou 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.
May 19, 2014 at 9:44 am #105868brightisland
ParticipantWell, 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.
May 19, 2014 at 10:11 am #105875Brad Dalton
ParticipantYou 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.
May 19, 2014 at 11:04 am #105883brightisland
ParticipantThank 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)?
May 19, 2014 at 1:08 pm #105892brightisland
ParticipantOk... 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.
Thank you!
May 19, 2014 at 2:24 pm #105909brightisland
ParticipantNevermind... I figured it out.
May 19, 2014 at 10:13 pm #105957Brad Dalton
ParticipantMay 20, 2014 at 1:40 pm #106063brightisland
ParticipantWell, 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.
May 20, 2014 at 8:57 pm #106112Brad Dalton
ParticipantOk. 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.