-
Posts
-
Hi,
I have a logo that is set “logo center, Menu below” in the Header Layout with “Sticky Header & Shrinking Header” set in Header Behavior.
Problem #1: The logo is resized too small (before shrinking)
Question #1: How do I increase the size of the logo (before shrinking) while maintaining the aspect ratio?Problem #2: The logo moves left (during shrinking)
Question #1: How do I keep the logo centered (during shrinking) while maintaining the aspect ratio?If you look at my website you’ll see I was able to achieve #1 and #2 using Quick CSS but the image does not maintain its aspect ratio (during shrinking); logo shrinks vertically but not horizontally.
.logo, .logo a, .logo a img {
width: 100%;
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}Hi corefocusgroup!
Please go to Enfold theme options > Header Layout > Header Size and choose to display custom pixel value and set the height to 266px and remove custom CSS code you have added. If that does not help, let us know so we can check your website to see the issue
Cheers!
YigitNope. That made it a lot worse.
When I use your code the image is too small and and does not fill the header space.
I tried using x2 and x4 sizes of the same image and it stays small.
The reason for my custom CCS was to increase the size of the image….
Maybe I can explain this better…
Using your settings the behavior is correct (shrinks and centered) but image is too small (before shrinking) and does not fill the 266px space.
I tried a x2 and x4 image but it remains at x1 (960 x 133) and does not fill the space.
The purpose of my CCS code was to enlarge the image but then it will not shrink and stay centered.
And the wining answer…
This doubled the size of the logo (pre-shrink) and kept it aligned in the center (during shrink).
—
.logo a img{
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}.logo {
width: 100%;
height: 100%;
}
- The topic ‘Logo (header behavior)’ is closed to new replies.