Scott Fisher
asked 9 years ago

  Hi, 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    

2 Answers
DominicStaff
answered 9 years ago

To 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 Fisher
replied 9 years ago

Thanks 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

Scott Fisher
replied 9 years ago

Is there a way that I can make the logo size bigger than 700 x 90px?

Dominic Staff
replied 9 years ago

You can tell me detail about the logo size that you want to make here.

Scott Fisher
replied 9 years ago

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

rhg01
replied 8 years ago

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

dominic Staff
replied 8 years ago

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,
DominicStaff
answered 9 years ago

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 !

rhg01
replied 8 years ago

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

dominic Staff
replied 8 years ago

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,

rhg01
replied 8 years ago

Thanks Dominic, I’ll stick with 770 x 90 for the header. What size would you recommend for the small logo?

dominic Staff
replied 8 years ago

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.

Powered by DW Question & Answer Pro