767 width center the logo

Tagged: 767px, center, logo

This topic has 5 replies, 2 voices, and was last updated 9 years, 6 months ago by Wes.

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

Author

Posts
September 26, 2014 at 8:08 am #14054
EliteGD
Customer
So I know i should know the answer to this but I just feel like i’m going round and round with this for the past couple of hours so if anyone has a suggestion that would be fantastic.
I’m aware the logo is currently massive i’ll be addressing that in a bit the problem i have that i’m trying to sort out is when I resize my screen to 767px and the hamburger menu comes up i want the logo to be centered.

The closest I got was editing this part, i reverted so it wont’ interfere with any suggestions.
.site-title a {
background: url(http://cloudstudio.ca/wp-content/uploads/2014/09/cloud_concepts_logo_header.png) no-repeat;
background-position: center center;
}

however this sort of centers it and but it’s still not in the middle and as you size down to mobile you can see that ti’s still off.

I have the site-title set to 100% to make sure to keep the menu below so i’m wondering if i need to put in another block and center that and set the background image on that. I am going to go grab a coffee and hopfully someone can help me as i know it’s a small thing but it’s driving me crazy LOL.
September 26, 2014 at 11:37 am #14057
EliteGD
Customer
Never mind I got it fixed i’m just a bit of an idiot lol
September 26, 2014 at 12:50 pm #14064
Wes
Moderator
No problem, just let us know if you need anything else.

BTW I removed the login info that you posted just in case someone else sees it and tries to login to your site. In the future, you can add your login info as a “Private Reply” if you check the box under the form and no one else will be able to see it. It won’t work on the first initial post, so you have to reply to yourself (create a second post right under) and then the Private Reply option will show up.
September 26, 2014 at 2:06 pm #14066
EliteGD
Customer
So for anyone who wants to know or runs into the problem
First as Wes pointed out in another post go to your functions.php

//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 145,
‘height’ => 113,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
) );

Change the width and height to match your exact logo size

In your style sheet inside your media query
@media only screen and (max-width: 767px)

add

.custom-header .site-title a {
background-position: center !important;
}

It was still a little tight on spacing so I added a bit of margin

.header-image .site-title a {
float: left;
min-height: 113px;
margin: 10px;
width: 100%;
}
September 26, 2014 at 2:07 pm #14067
EliteGD
Customer
Thanks Wes, I had made that account just for the post and have removed it after I got the issue solved. However good to know as I didn’t realize there was the private reply but I see that now that you pointed it out =).

Thanks
George M.
September 27, 2014 at 9:35 pm #14080
Wes
Moderator
Glad I could help. And thanks for posting the code above, I appreciate it!
Author

Posts

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

The topic ‘767 width center the logo’ is closed to new replies.