Logo + Blog Title as Header?

Tagged: header, logo, title

This topic has 9 replies, 3 voices, and was last updated 7 years, 9 months ago by Wes.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
June 29, 2016 at 11:18 pm #18495
Matthew
Customer
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
July 1, 2016 at 10:56 am #18513
Wes
Moderator
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.
July 1, 2016 at 11:14 am #18516
Martin
Customer
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?
July 2, 2016 at 6:34 am #18527
Matthew
Customer
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.
July 6, 2016 at 11:29 pm #18595
Matthew
Customer
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
July 8, 2016 at 1:48 pm #18632
Wes
Moderator
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;
}
```
July 12, 2016 at 11:55 pm #18703
Matthew
Customer
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.
July 13, 2016 at 12:09 am #18704
Matthew
Customer
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.
July 15, 2016 at 3:07 pm #18746
Wes
Moderator
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.
July 15, 2016 at 3:10 pm #18748
Wes
Moderator
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' );
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.