Hey there atardiff,
Hope you’re well today!
This could be done with some custom CSS. Please try adding the following in Appearance >> Customize >> Advanced Options >> Custom CSS:
@media (max-width: 979px) {
.tc-header .brand .site-logo img, .tc-header .brand .site-title {
float: left;
}
header.tc-header {
background-size: contain;
}
}
This should push logo on the left and resize the image so they are both displayed on resolutions smaller then 979px.
Please let me know if this helps 🙂
Cheers,
Bojan
Thanks! That helps. The problem now is that the logo is still large, so the header image shrinks and slips behind the logo, which still looks messy. Any way to shrink the logo as well?
Hey there atardiff,
Please try adding this code as well:
@media (max-width: 650px) {
.tc-header .brand .site-logo img, .tc-header .brand .site-title {
width: 180px !important;
height: auto !important;
margin-left: -30px;
}
}
This should make the logo smaller on resolutions below 650px since there things are starting to get “messy”. Normally I wouldn’t suggest the use of the !important declaration. However, it can sometimes be a necessary evil when over-writing existing styles. You can find more info on important declaration here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception
Hope this helps 🙂
Cheers,
Bojan
Hmm . . . it still looks messy, since the header and logo shrink at different rates. On my iPhone 4 the logo still obscures part of the header image.
I’ve got a different idea. Is there a way to disable the logo on the regular screen, and have it appear only on the “sticky” area when scrolling down? Then I could make a new header image with the text and logo in a single image, so it would all shrink at the same rate.
Hey again,
You could place it below the image on smaller resolutions. If you want to do that please add the following:
@media (max-width: 650px){
.tc-header .brand .site-logo img, .tc-header .brand .site-title {
float: none;
margin-top: 70px;
margin-bottom: -60px;
}
}
This should make the logo appear below the image on smaller resolution so you don’t have to resize the logo at all.
Hope this helps 🙂
Cheers,
Bojan
Thanks again! But . . . I’m still having issues. Now when I scroll and the logo is supposed to shrink to a sticky area at top, it instead floats BENEATH the sticky area.
Also, the header image needs to sit next to the logo when the browser window is full size, but be centered when the browser window is shrunk and the logo slides beneath it. I originally made it sit next to the logo before by adding transparent space in the header image, but now it’s not centered when the browser window shrinks. If I remove that space it looks fine when the window is shrunk, but the logo sits on top of the header image when the window is full size.
I think simply hiding the logo at the top of the browser window might be simplest, if it can re-appear in the sticky area when I scroll down.
So I figured out how to do that from the Customizr theme options. 🙂 It lets me upload a second logo for the sticky area. I made the main logo a transparent .png because no logo at all was messing up the spacing.
Now I just need to get the header image centered and I’ll be all set!
Hi atardiff,
Now I just need to get the header image centered and I’ll be all set!
The header image is quite big and won’t fit with the menu.
Do you want the menu bellow or above the header image?
Thanks,
Ivan
Above. I made the header a .png with transparent space where the menu is free to go.
Hey atardiff
Could you try adding the fallowing CSS:
header.tc-header{
background-position: 48% 0;
}
.pull-menu-right .nav-collapse {
float: left;
}
.navbar .navbar-inner {
margin: 0;
}
That should center the header and the menu appear above the header image on desktop and devices with large resolution.
Let me know if this works for you.
Thanks,
Ivan
That’s awesome! Works great! Thanks!
