Logo size issue

Support
#1

Hi,

I have a problem inserting logo image. The problem is that when I add the image, it is always too short (as I marked on the pic). Height is ok, but not the length. No matter how I would change the dimensions of logo. What can I do? Thanks

#2

Hello There,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#3

It is still hosted on localhost, can’t provide with URL, sorry. Picture provided earlier is all I can do. No custom css added, and the primary settings are not changed except Logobar top and bottom spacings are set to 0.

#4

Hi there,

We cannot fully point out what is causing the image to have a width limit but it’s possibly the width limit that is set to the container of the logo area.

Please try this code in the custom CSS:

.x-navbar-inner .x-container {
    width: 100%;
    max-width: 100%;
}

Hope this helps,

#5

Hi,

The code is not working… If I change navbar background color it changes the logo area sides color as well. Maybe it is somehow connected? Thank you.

#6

Hello There,

Thanks for updating in! Please go to X > launch > options > Header and make sure that “Logo and Navigation” is set as “stacked”. And then make use of this code instead:

.x-logobar {
   background-color: #e5e5e5;
}
 
.x-logobar .x-container {
    width: 100%;
    max-width: 100%;
}

Feel free to change the background color of the logo if needed.

Please let us know how it goes.

#7

Hey,

Thank you for your answer! Logo and navigation is set as stacked. After I inserted the last css code it looks like this: However, this is not the result I want… I need that the logo image would be from side to side instead of being in the middle. I don’t need these corners in any color, I would like to see only the logo image there. Thanks :slight_smile:

#8

Hi,

You can try this code instead.

.x-logobar {
    background-color: #e5e5e5;
    background-size:cover;
}
 
.x-logobar .x-container {
    width: 100% !important;
    max-width: 100% !important;
}

.x-logobar img {
    width:100%;
}

Hope that helps.

#9

Finally it works! Thank you very much.

#10

Glad we could help.

Cheers!