Archived topic
Different headers for different screen formats
7 replies · Started by Peter on January 6, 2022
Hi -
My client has asked for a header containing an image such as can be seen at https://agapanthus-consulting.com/devpzz/
I've achieved this by embedding the image in the header in the customize options and adding a generate_after_header_content element to contain the text content for the phone number, etc.
The problem I have is that this does not scale well for tablet and mobile sizes, the text overlaying the image and becoming illegible, and so I am forcing the mobile menu breakpoint at a tablet screen size to revert to the mobile menu and not display the image.
Is there a more elegant solution to get around this?
Regards -
Peter
Hi there,
yeah thats a tricky one to maintain responsiveness.
What would be the ideal solution on tablet devices ? Should the image stack above the logo and the text ?
Hi David -
I think that would work if we could. I guess I’m not really sure what the art of the possible is really. Maybe span the text at a smaller font size into a strip if it were possible?
She uses this style of heading in her LinkedIn page but it’s made up of a composite image combining the image and the text so you lose al the click through functionality and the fonts don’t scale very well.
Peter
I would go with:
1. remove the background image from the header.
2. remove the Top, left and bottom padding from the header.
3. insert the image as an <img> element using the same hook as you did the text. Give the image a CSS class so we can target it.
4. Change the Mobile menu breakpoint back to default.
Then i can take a look at some CSS to keep it responsive.
Sorry David. I've been away from work for the past week because of illness. I'll take a look at the suggested approach and see what we can do.
Let us know how you get on
Hi David -
After a bit of tinkering I finally came up with the following solution. There may be a more elegant way to do this but I include it as it might be helpful to somebody else. Firstly, I used the generate_after_logo hook to control the header content....
<div class="flex-container">
<div class="agp-header-image">
<img src="https://agapanthus-consulting.com/devpzz/wp-content/uploads/2021/12/Shoes-1024x423-1.png" alt="Pazzazz Me" />
</div>
<div class="agp-header-block">
<p class="agp-header-line">Belinda Butler</p>
<p class="agp-header-line">Beauty and Fitness Consultant</p>
<p class="agp-header-line"><a href="tel:07889 419681">07889 419681</a></p>
<p class="agp-header-line"><a href="mailto:belinda@pazzazz.me?subject=Enquiry For Pazzazz Me">belinda@pazzazz.me</a></p>
</div>
</div>
Then I wrote some media queries and styling...
.agp-header-line{
color:#f12180;
line-height:1em;
font-size:.65em;
text-align:left;
}
@media only screen and (min-width:600px), screen and(max-width:867px){
}
.agp-header-image{
width: 75%;
float:left !important;
}
.agp-header-block{
width: 25%;
float:right !important;
padding:1% 0% 0% 1%;
}
@media only screen and (min-width:868px){
.agp-header-image{
width:60%;
float:left !important;
}
.agp-header-block{
width:40%;
float:right !important;
padding:1% 0% 0% 1%;
}
}After a bit of jiggling around with the mobile menu breakpoint I got pretty much the solution I was looking for. If you have any suggestions to improve I would be grateful to hear.
Peter
Looks great and responds really well to different screen sizes :)
