also known as site-branding area.
and thanks!
-
This reply was modified 8 years, 3 months ago by
terry777.
Hi @terry777
If the image can be split up into a background and a transparent logo then you could add the background to the header background field and the logo to the logo field. That would be the best for responsive behaviour but only applies to a certain type of image. The header background setting is in premium but I can assist with Custom CSS if you want to go that route.
The logo has a max-height constraint, if you want to remove that, add:
.site-header .site-branding img {
max-height: none;
}
To make the header area full-width you can try adding:
#masthead .container {
max-width: none;
padding: 0;
}
There however might be knock-on responsive challenges from doing this.
Hope that helps you get started with this customisation 🙂
Hi, If I split the image in two, the logo on the left and the tagline and address on the right, with the tagline/address being in the background, how will it display as the screen becomes smaller, will they overlap at all, or will they just get smaller? Also, will the “hamburger” menu overlap?
I tried the css above, but on smaller screens I don’t like how it looks, although I could live with it if I have to.
Thanks!
Hi, if you’d like the CSS rules suggested above to not apply to mobile then you can wrap one or both of them like below.
@media (min-width: 780px) {
#masthead .container {
max-width: none;
padding: 0;
}
}
-
This reply was modified 8 years, 2 months ago by
SiteOrigin.
-
This reply was modified 8 years, 2 months ago by SiteOrigin.
Hi Terry
Regarding my suggestion of splitting the the logo and the background image. That suggestion is unfortunately not ideal for embedding data like the tagline in the background image. However, it would be best to test it out, even if it’s with a dummy image, just to see the result. It should only take a couple of minutes.
I was just going to make the tagline and contact information into an image, to use it as the background.
However, I ended up changing the height and width of the header and moving the logo closer to the other information, and it looks ok, at least on my pc, ipad and iphone.
I did have to also adjust the css on not just the image but also the container itself because the image was cut off on the bottom.
.site-header .site-branding-container {
max-height: none;
height: 140px;
}
Thank you again for your help. I do plan to make a donation soon, you have been so kind to help.
Super 🙂 Thanks for the update. Really glad to hear you’ve been moving along with this challenge.
Of course the person I’m doing the website for has decided to have just the logo without the contact information, centered, but larger. I think 200px high will be high enough rather than the default 140px. Do you have a demo with the centered logo with the menu below? I’d like to see how the logo looks with a sticky header. Mine gets “cut off”, covered by the height of the menu, and looks funny. I don’t know if I did something wrong, or the image is not scaling down correctly. It only scales down so far, then gets covered by the menu. I didn’t notice it when it was the logo with the contact information, but with just the logo it’s very noticeable. Maybe it was happening and I just didn’t notice.
Hey Terry. If the logo is big then it’s worth considering not using a sticky header. If it takes up a lot of screen room then it isn’t really helpful for the user and lands up covering content. If it must be kept, please, send me a link to the site and I’ll take a look and help fix from there 🙂
That’s a good point about the header taking up too much room, although the logo does get smaller, and 200px high isn’t that much more than the default 140px. Since they don’t have a sticky header on the current site, maybe they won’t care if it’s not sticky on the new one. I’ll try that, and see how it goes. It’s certainly the simplest solutuion. Thanks!
-
This reply was modified 8 years, 2 months ago by terry777.
Sounds like a plan. Hopefully, they’ll be happy with that 🙂 Chat soon, cheers.
