How to add tall logo to header

[cedricstudio]

I bought this theme a couple of days ago and I think you did a really nice job!

I have a logo that is not long and horizontal, it is more tall and stocky (three words stacked on top of each other). When I place it in the header it looks really small, and when I use the sticky header it gets so small it is almost unreadable. Is there any way I can increase the size of the header to give it more “logo room”?

Topic

[Jason Bobich]

Hello,

Thanks!

Unfortunately, there’s no option for changing how the header is laid out. The design is meant to to accommodate a logo of similar size to what you see by default. So to change this would be a CSS customization you’d need to make.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

Can you post a link to your site with the logo you’re using inserted? And maybe I can help to point you more in the right direction with your customization of the header?

[cedricstudio]

Thanks very much. I really like the theme but I was surprised that it only accommodates long horizontal logos.

I’m still building my site but here’s what I’ve got so far: http://newwebsite2015.cedricstudio.com

I’ve made some accommodations/redesign to my logo already to try and stretch it out more, and I’ve also made it larger than you recommended in the theme instructions, but you can see how it still gets unreadable in the sticky header. I would love to see that fixed in a future update.

Still a good theme overall though.

[Jason Bobich]

On the header, what determines the height in your configuration is the padding on top and bottom of the main navigation. The navigation itself is 38px tall, and then padding added to the top and bottom added to that determines the overall height. By default, your header is 86px.

Top Padding + Menu Height + Bottom Padding = Header Height

24px + 38px + 24px = 86px

So, for example, if you wanted increase the height of your header from default 86px to 150px —

.header-nav {
    padding-top: 56px; /* (150 - 38) / 2 */
    padding-bottom: 56px; /* (150 - 38) / 2 */
}

---

Just a note: I noticed your logo image file is gigantic — it’s 1379×757. After you’ve figured out the dimensions you actually want to use for the logo, I would suggest uploading an image file that is naturally that size, for better efficiency in the loading of your site.

---

For the sticky menu, I would suggest not messing with this because you have to not only edit the height of the sticky menu, but how far it animates on/off the screen as the site is scrolled.

Personally, I think the sticky menu should be a short navigational item that doesn’t take away from the rest of the site as you scroll down. So if you want to use a different logo image for the sticky menu that is more suited for that area, this is also possible through basic child theme customization.

See this article: http://dev.themeblvd.com/tutorial/adding-a-custom-logo-to-the-sticky-menu/

/**
* Filter in custom logo URL for sticky menu
*/
function my_sticky_logo_uri() {
    return 'http://yoursite.com/uploads/xx/xx/your-sticky-logo.png';
}
add_filter( 'themeblvd_sticky_logo_uri', 'my_sticky_logo_uri' );

Alternatively, you could also disable sticky menu all together from your theme options page. Further to that, another customer did this, and then adjusted the site’s main header to just be fixed in place always at the top of the browser window with custom CSS.

http://support.themeblvd.com/forums/topic/rtl-bugs-and-other-stuff/#post-24183 (See “Having 2 different headers when choosing sticky header”)

[cedricstudio]

Thanks. I appreciate the very helpful suggestions!

[Author]

Replies