Logo keeps resizing to wrong (smaller) size

[rasmusberg]

I really love this theme, but ever since I bought it, I have had problems with the header logo. The logo keeps resizing to a smaller size.

The only way to show the logo in the original/correct size, it to enable sticky header. But now I really would like to have the problem fixed.

I have read all the earlier comments with the same problem, and the solutions does not work on my site. I have tried making a larger main menu area than the amount of pixels of the logo. But it does not work.

Can you help me?

You can see the problem here: Fredstegn.dk

The logo resizes after 1 second or so. The problem occurs in Safari, Firefox and Chrome. I have tried clearing cache also. Thank you.

[Radu]

Hi,

Please add this code to wp-admin -> theme options -> general settings -> quick css

COPY CODE

.kleo-main-header img#logo_img {
    width: 100% !important;
    height: 100% !important;
}

Let me know if is ok.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[rasmusberg]

Thank you Radu. But is it not better to correct the bug instead of adding another code?

[rasmusberg]

The CSS code does not work by the way. I gave you admin credentials to my site if you want to test…

The code does work when viewing the site on Firefox and on Safari it only makes it the correct with, not height.

[Radu]

Hi,

I see, i’ve added this to buglist and this will be fixed on a future update.

Meanwhile use this css fix

COPY CODE

.kleo-main-header img#logo_img {
    max-height: 109px !important;
}

I’ve added already to your wp-admin -> theme options -> general settings -> quick css

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[rasmusberg]

Great! Thank you so much 🙂

[Abe]

Hello, we improved the logo logic and now it should be flawless 🙂

Let me know after the update how it works if you remove the solution given by Radu. Update coming Monday.

Thanks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[rasmusberg]

It works perfectly. Awesome service guys!

[rasmusberg]

Hi again

The problem was not solved after all. Check https://fredstegn.dk – the problem occured again. I have not made any changes…

Thank you

Regards

Rasmus Berg

[rasmusberg]

I forgot I added some CSS you suggested on your Comments-section to change color on the topbar. This is my full list of custom CSS:

body.home .main-title .page-title{ display:none; }

figcaption {
display: none;
}
#accordion-woo { clear: both !important; }

.social-header.header-color {
background: none repeat scroll 0 0 #ffffff;
color: #b5b5b5;
}
.social-header.header-color a {
color: #b5b5b5 !important;
}

[Radu]

Hi,

Please let me know how do you need to fit the logo, a sketch will be helpful but see the attached image, in that way you need to fit the logo on mobile ?

If yes i’ve used this css

COPY CODE

@media(max-width:720px) {
.navbar-header .logo {
    max-width: 75%;
    display: inline-block !important;
    top: 25px;
    height:100% !important;
}}

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[rasmusberg]

The shortcode did not work, but I used the last one you guys gave me. That worked. I removed it because you wrote in the last ticket that you had found a solution to the problem.

I dont quite understand what you mean with the screenshot you attached. Can’t I use the logo I already have? Does the logo have to be excact same size as the logo on your demo site?

Do you have any problems with Composer? Ever since last update my pages look a bit wierd. Check this for example. There is no padding even though I have not touched anything. Its not set to full wide…

Example: https://fredstegn.dk/om-fredstegn/

[rasmusberg]

Also, the top of the mobile side menu is blocked by the top bar. Is it possible to correct this or disable the topbar on mobile views totally? It creates two lines so it kind of clumsy in the first place…

[Radu]

Please wait for the 4.0 Update we will release it tomorrow and it will contain a patch for the logo logic and also for the VC.

Until then please use this css to can show the logo ok

COPY CODE

.kleo-main-header img#logo_img {
    max-height: 109px !important;
}

Regarding the top social bar on mobile please use this

COPY CODE

@media (max-width:700px) {
.top-bar, .top-bar #top-social {
    display: inline-flex;
    width: auto !important;
}}

After you update the css file clear the cache.

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[rasmusberg]

Thank you for your answer 🙂 Sounds great with an update…

The CSS that changes the topbar only makes it look wierd and it does not solve the problem with blocking of the side menu.

Does tommorows update solve this problem also?

[Radu]

Hi,

The update will not affect the top bar just tell me how do you need to look on mobile ? disabled or how ?

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[rasmusberg]

Yes disabled. Then there isnt any problems… Thanks

[Radu]

Add this

COPY CODE

@media (max-width:700px) {
.top-bar{
    display: none !important; 
}}

Let me know if is ok

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[rasmusberg]

Thank you it worked. How about the question about the logo… Does the logo have to be the same size as your demo?

[Radu]

The logo no needs to have same size as logo from demo.

The height of the logo needs to be equal to the main menu height on theme options.

For retina displays you can make logo with double portions ( width / height )

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jpfrancois]

Hi,

I followed the custom css information provided, but my logo is still getting smaller on some browsers and on the mobile display as well, please see digitizedlogos.com.

[Radu]

Hi,

You have this on quick css area from theme options, delete it.
.kleo-main-header img#logo_img {max-height:88px;} and replace it with those

@media(min-width:992px){
/*DESKTOP*/
.kleo-main-header img#logo_img {
max-height: 170px !important;
}

}

@media(max-width:992px){
/*MOBILE-TABLET*/
.kleo-main-header img#logo_img {
max-height: 133px !important;
}

}

Adapt the values for your needs, anyway the problem it’s because you are using a portrait format of a logo instead of landscape

Cheers
R>

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts