Scott FisherHi, I would like to remove all of the existing widgets etc from the header of my website and replace them with a single logo. Rather than having the image of the girl and the text "Build Your Affiliate Website", I want to have a single logo image that fills the whole header area. Could you please advise: 1). How I configure the header so that my logo image is the only thing that displays in the header; and 2). Advise the dimensions of the header area in pixels so that I can tell my designer how big to make the logo. Thanks for your help, Scott
DominicTo increase size of logo in header (E.g: 450x70px), you can do as the following:
Step1: Log in to Dashboard > Appearance > Widgets > Header, delete all the Text widgets in the Header section.
Step 2: Go to Dashboard > Appearance > Customize > General Settings, add the following code to the Header Code:
<style>
.site-header #header {
background: none;
}
#branding {
width: 450px !important;
}
.site-header #branding a {
width: 450px;
height: 70px;
}
@media (max-width: 979px) {
.wrap-navigation .small-logo {
webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
}
</style>
Step3: Add your logo image in the Site Tile & Tagline section.
Note: You can use logo image size is 700 x 90px.
Hope this helps !
Scott FisherThanks for getting back to me so promptly Dominic.I’ll try this out over the next day or so and let you know if I need any further help.Thanks, again for all your help! Cheers, Scott
Is there a way that I can make the logo size bigger than 700 x 90px?
DominicYou can tell me detail about the logo size that you want to make here.
Hi Dominic, I’d like to try a few different sizes, but I think 1000 x 100 would be about right.I guess if you can provide the code I can experiment with different sizes.Thanks, Scott
Hi, A follow up question on this. I need to add a large header and a small header ( i.e. an image to be used as a header on mobiles, tablets etc.) and I want to make sure that they work with all devices. Could you please suggest the best size for the large header and the best size for the small header?
Thanks,
Scott
You can tell me detail about this issue. Are you want to add 2 other Header image.
- Large header just display on desktop.
- Small header display on mobiles, tablets.
Regards,
If you want to use the logo size: 1000x 100px, you can add the following code to the Custom wp_head() code:
<style>
.site-header #header {
background: none;
}
#branding {
width: 1000px !important;
}
.site-header #branding a {
width: 1000px;
height: 100px;
}
@media (max-width: 979px) {
.wrap-navigation .small-logo {
webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
}
@media (min-width: 980px) and (max-width: 1079px) {
.site-header #branding a {
width: auto;
height: 100px;
}
}
</style>
Hope this helps !
Hi, A follow up question on this. I need to add a large header and a small header ( i.e. an image to be used as a header on mobiles, tablets etc.) and I want to make sure that they work with all devices. Could you please suggest the best size for the large header and the best size for the small header?
Thanks,
Scott
Don’t worry, if you use the image in the Header section, you just need to add the following code to the style.css file to allow the Header section display on the mobiles, tablets etc.
@media (max-width: 979px) {
.site-header #sidebar-header {
display: block;
}
}You can use the image size 770 x 90. The images will auto fit on other devices
Regards,
Thanks Dominic, I’ll stick with 770 x 90 for the header. What size would you recommend for the small logo?
In the latest version 1.2.5, our theme used the small logo size is 115x40px.
Also, in the older version is: 100 x 22px.
Please login or Register to submit your answer