Homepage › Community Forums › Vintage Theme Support › Logo + Blog Title as Header?
Hello,
First of all, thank you for producing such a wonderful theme; we’ll be using it on our live website after we change a few things around.
I was wondering if it is possible to have a small image logo as the header image (say 60×60) while preserving the site title text with the nice font vintage has. So it looks like LOGOIMAGE + BLOGTITLETEXT side by side.
It seems you can only choose either or, leave the header image blank for the title to appear or choose an image to replace the blog title text.
Thank you.
Matt
That’s a good question, I haven’t seen it done before, but it could be possible to do. It’s designed like that in the Genesis Framework itself.
Do you have a link to your site with the logo active? Maybe I can see if it’s possible to “unhide” the text with CSS.
Would a viable alternative be to completely hide the site name / logo and add a widget area where a text widget could be added with the HTML for the image and text?
Unfortunately the website I’m working on isn’t live yet, as I’m customizing it to implement on my active website.
Martin’s suggestion sounds pretty good, or if there’s any other way of injecting that logo image to the header hooks of genesis.
I think it would provide a less ‘generic’ effect as the font text gives it a personal feel instead of the typical either or situation when it comes to logo images.
Hey Wes,
I created a demo site with a random image logo to see if it’s possible to ‘unhide’ the logo text. This is the url: http://goo.gl/qTZFYs
Do you think it would be doable?
Warmly,
Matthew
You can unhide it by removing the text-indent
on line 1260 in your css –
.site-description {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}
Thanks Wes, that did the trick.
I’ve noticed in the responsive arrangement of the website, there’s a significant piece of white space above the Logo/site title and also below the menu hamburger (demo; http://demo.appfinite.net/vintage/ when minimizing the browser windows width).
Where can I go about removing some of that white space? I manage to remove some of it in the ‘.genesis-nav-menu a’ padding for desktop use but if we consider above the fold area as valuable, that would take up a large empty part of the small mobile phones screen. I tried to edit some of the css media tags .genesis-nav-menu a class padding but I don’t think it changed much.
P.S: How do I get it to stop doing the ‘site-header light’ where on scroll the header images popouts and becomes a bit more prominent?
I’ve changed the ‘.header-image .site-title > a’ to a height of 50px and I’m happy how it displays when it’s not scrolling down and popping out.
Take a look around line 2345 in your CSS and you can adjust the padding above and below the header –
.site-header .wrap {
padding: 20px 5%;
}
Changing 20px
will change both the top and bottom together.
To remove the site-header light
take a look in your functions file and remove or comment out this line –
wp_enqueue_script( 'vintage-global', get_bloginfo( 'stylesheet_directory' ) . '/js/global.js', array( 'jquery' ), '1.0.0' );