7 replies · opened Jun 19, 2022
Hi,
I would like to place the logo outside the header wrap (pic1) but so that it is aligned on top and larger than my size header-size-md - (pic2)
I used a script:
#logo img {
position: relative;
bottom: -20px;
}
but when I enlarge the logo img for header-size-md, the header wrap also increases and I don't want that
thank you
Hello,
To have a Fixed Height with a Variable Logo Size, we recommend using the Custom Header Heights setup using CSS: https://docs.semicolonweb.com/docs/header/header-heights/#docs-steps-custom-css . You can change the Heights according to your needs.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
but if I do that, the height of the header will increase and I don't want it .. I would like the logo to extend beyond the header - pic2 pink area
Thank you
Hello,
The Custom Headers with CSS is specifically for Headers with Custom Logo Heights and Header Sizes, so this should work perfectly fine. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Hi,
here is live web link: https://www.webgrafik.sk/martinusik/
pls check it out
I've tried all the combinations and I can't .... I need HEADER HIGH - 70px and LOGO HEIGH - 150px thats all
Thank you
B
Hello,
We have checked out your Codes and as we have mentioned earlier, you will need to use CSS to set your Header/Logo sizes. Consider using the following CSS instead:
[ch_pre type="css"]/* Custom Header Size
-----------------------------------------------------------------*/
.header-size-custom #logo img {
height: 70px;
}
@media (min-width: 992px) {
.header-size-custom #logo {
height: 70px;
bottom: -40px;
}
.header-size-custom #logo img {
height: 150px;
}
.header-size-custom .header-wrap-clone {
height: calc( 70px + 1px );
}
#header.header-size-custom + .include-header {
margin-top: calc( -70px - 2px );
}
.header-size-custom.sticky-header-shrink #header-wrap #logo img {
height: 70px;
}
.header-size-custom .menu-container > .menu-item > .menu-link {
padding-top: 24px; /* (70px - 22px)/2 */
padding-bottom: 24px; /* (70px - 22px)/2 */
}
.header-size-custom.sticky-header-shrink .menu-container > .menu-item > .menu-link {
padding-top: 24px; /* (70px - 22px)/2 */
padding-bottom: 24px; /* (70px - 22px)/2 */
}}[/ch_pre]
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
perfeeect! .. thank you very much!
Glad the issue was resolved! :)
Do let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard