Wide logo automatically resized to smaller size!?

[slick8088]

Hi there, I have a logo with a size of 526x103 px, when i add it to the website it looks like this: http://abload.de/img/logo113qfh.png which is clearly too small. After that i adjusted the height under wp-admin->appearance->customize->header->adjust header-> logo size to: 103px and it didnt resize. After that i looked around in the forum and FAQ and found these settings, which i added in custom css: nav .menu li a{ padding-top:50px !important; padding-bottom:50px !important; } header #searchicon{ padding-top:45px !important; padding-bottom:45px !important; } I adjusted the values so that my logo would fit in the header space, but still the logo wouldnt resize and the logo looks like this: http://abload.de/img/logo2tlobh.png I actually got it working with a logo which wasnt that wide (http://abload.de/img/logo3nso97.png), with the same settings, but i do want a logo that wide with the text. Help would be much appreciated.

[H.K. Latiyan]

I don't know why it didn't resize the logo, if you go to appearance->customize->header->logo size (height in px): it is set to 48 by default if you make it 103 it will resize to 103px. I cross checked it and it works fine. Please re-try this setting, as it works fine. Still if its not working then you can use this css in your wp-admin->appearance->customize->custom css:

#logo img, #alt_logo img {
max-height: 48px;
}

adjust the px accordingly.

[slick8088]

Hi Latiyan, i tried everything, even uploading the logo again 2 browsers and it still wont work. :( I made a screenshot where you can see that i changed the settings for height, but it still won't resize: http://abload.de/img/unbenannt-13er2u.png

[slick8088]

Ok, got it working, just added: #logo img, #alt_logo img { max-height: 103px; max-width:526px; } Width seemed to be important in this case. Now i have another problem: http://abload.de/img/unbenannt-1lwsl8.png The padding for the submenu is too big, how can i adjust the padding only for the submenu? Thanks for the help :)

[slick8088]

I also just noticed that the logo won't resize when the website is loaded on a mobile phone. And the area to click on the logo doesn't cover the whole logo, any ideas how i can correct this? Thank you

[H.K. Latiyan]

You have added this custom css: nav .menu li a { padding-top: 50px !important; padding-bottom: 50px !important; } Please remove the above css and instead use this css: nav ul#menu-main-menu>li>a { padding-top: 50px !important; padding-bottom: 50px !important; }

[slick8088]

Thank you! Now i just need solutions for the other 2 problems, please. 1. I noticed that the logo won't resize when the website is loaded on a mobile phone. 2. The area to click on the logo doesn't cover the whole logo, any ideas how i can correct this?

[H.K. Latiyan]

You can use this custom css:

#logo img, #alt_logo img {
width: 100%;
padding-right: 60px;
}

[slick8088]

Nope, doesn't work: http://abload.de/img/unbenannt-1q9sn2.png

[H.K. Latiyan]

Please remove the above css and try this custom css:

@media (max-width:768px){

#logo img, #alt_logo img {

width: 100%;

padding-right: 60px;

}}

[slick8088]

Sorry, but no, it still won't work like that. Logo just gets resized to smaller size. Only thing that worked until now, was: max-width:526px;

[H.K. Latiyan]

The logo will get resized only in mobile not in desktop. This is because your logo is very big. There are two cases: 1) You want your logo to be very big then it will take its own space and it will cut in mobile because it cannot be adjust in mobile view. 2) You have to use the above css and resize your logo in mobile view.

[slick8088]

Sorry, tried everything you told me, yet the logo gets smaller (in desktop mode) every time i change: max-width:526px; Is there a solution for having such a big logo and still having it resize correctly?

[H.K. Latiyan]

For the mobiles only, I gave you the media query css above it will effect only the mobile view not desktop, you can use max-width in media query and then desktop will not be effected and changes will be reflected only in mobiles. You can also try the different header styles from wp-admin->appearance->customize->header->header styles, and try standard centre style it will make the logo in one row and menu in the next.

[Author]

Posts