Small Logo won't resize header

Tagged: logo resize

This topic has 15 replies, 2 voices, and was last updated 8 years, 2 months ago by Andykev.

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

Author

Posts
January 31, 2016 at 6:48 am #17107
Greg
Customer
When uploading a small logo 256 x 48px I get a large padding underneath the logo, see here http://kettlebellsworkouts.com/blog/

How can I reduce the padding and make the header nice and thin like on the demo site. I have changed the logo sizes in the css and functions file as mentioned in earlier posts but still have the same issue.

Really hope someone can help.

Thanks.
January 31, 2016 at 12:01 pm #17114
Andykev
Customer
Greg,

Looking at your website, the header logo is text and it looks properly spaced. On Iphone screens, the text “stacks” above the hamburger menu icon. Did you wand almost no blue showing in your header?
```
/*
Site Header
---------------------------------------------------------------------------------------------------- */

.site-header .wrap {
	padding: 16px 0;
}
```
This code is the same on the demo site, and on your site. If you change the 16px to 0 for example, the header gets ultra thin.
January 31, 2016 at 2:20 pm #17115
Greg
Customer
Thanks for the quick reply. I did upload an image for the header but had to change it back to text because the padding was really big. It seems no matter what changes I make to the css, including what you mentioned above, it gets ignored.

Is there a way to force through these changes? Or could there be a conflict somewhere?

Many thanks, Greg
January 31, 2016 at 4:59 pm #17116
Andykev
Customer
You need to upload the image you want to have as your header “logo”. Then we can check it out. With your actual image missing, anything is a guess.

If your logo does not size properly on smaller screens (responsive) you need to add this code:
```
.header-image .site-title a {		
    background-size: contain !important;
}
```
What this does is it forces your image to resize to small screens so it is not “cut off”. But depending on what you use for the logo image, it could “increase” your gap (space) between the hamburger icon menu and the image.

Need to see it.
January 31, 2016 at 5:04 pm #17117
Greg
Customer
Hello,

Here you go, I’ve uploaded the logo again so you can see the issue: http://kettlebellsworkouts.com/blog/

I hope we can sort this out.

Many thanks
January 31, 2016 at 8:48 pm #17119
Andykev
Customer
Add this to your style.css at the bottom
```
/* Full width header, no widgets */

.title-area .site-title a {
    background-position: center center!important;
    float:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
```
Then change this:
```
.header-image .site-title a {
	float: left;
	min-height: 100px;
	width: 100%;
}
```
The original “min-height: 164px” matches your theme settings. You can reduce it to 100.
The default header image size can be found in your functions.php file.
February 1, 2016 at 3:34 am #17120
Greg
Customer
I have added both of the changes into the epik style.css and it still hasn’t changed anything. For some reason the changes are not taking effect. I’ve cleared the cache, so not sure what is going on.

What should I try next?
February 1, 2016 at 12:06 pm #17123
Andykev
Customer
I just looked at your site. The logo has been removed, and the .css changes are not showing.

Did you remove them?

Use “Inspect Element” on your site and add the changes and at least here on my end they worked.
February 1, 2016 at 12:15 pm #17124
Greg
Customer
Please take another look now: http://kettlebellsworkouts.com/blog/

I made all the changes you mentioned above but it seems something is overriding the changes.

What else can I try?
February 1, 2016 at 2:58 pm #17129
Andykev
Customer
Greg,

This is still missing from your style.css:
```
/* Full width header, no widgets */

.title-area .site-title a {
    background-position: center center!important;
    float:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
```
Add that at the very bottom of your style.css and save, then clear your cache. It centers your logo horizontally.
February 1, 2016 at 3:09 pm #17131
Greg
Customer
Hello,

OK, that was already added to the bottom of the Epik style.css I also added it to the bottom of the Genesis style.css

The results are still the same even after refreshing the cache.

I think there is something blocking these changes from happening. Can someone login to my admin and investigate further?

I don’t like leaving the header as it is because it doesn’t look to great.

Thanks
February 1, 2016 at 4:21 pm #17133
Andykev
Customer
Do not add that to your Genesis style.css, ONLY make changes to your Child Theme (Epik).

You do not have a cache plugin installed? Deactivate it if so during any customizations.

I am going back to look at your site.
February 1, 2016 at 4:32 pm #17134
Andykev
Customer
This reply has been marked as private.
February 1, 2016 at 5:01 pm #17135
Greg
Customer
Thanks again. I understand about the inspect element, and I can make the changes but they do not take effect on the live site. I have cleared the cache several times.

For some reason the css changes do not take effect. Could there be some code somewhere that overrides the css changes? Is this possible?
February 1, 2016 at 6:49 pm #17137
Greg
Customer
Hello, I fixed the issue. It was a DNS issue. Thanks for your help.
February 1, 2016 at 8:41 pm #17138
Andykev
Customer
Wow. I was pulling out my hair! Glad you got it fixed and I hope you got the look you wanted. Epik is a very nice, flexible theme. I use it for three websites. Wes did a great job. In fact this theme can almost look like several different themes, what with the widgetized options.

Happy Webbing!!
Author

Posts

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

You must be logged in to reply to this topic.