Hi, look at the screencast gif attached and also the Live URL. The menu at the top is always "jumping"...
I am working with the JS method to adjust the height:
<header id="header" data-logo-height="50" data-menu-padding="34" data-mobile-logo-height="40" data-sticky-logo-height="50" data-mobile-sticky="true">
Any reason why it's jumping and any info how to avoid that?
Hello,
The Jump is due to the Logo Height/Menu Paddings being set using JS and has already been mentioned in the Documentations: http://docs.semicolonweb.com/docs/header/header-heights/#docs-steps-using-javascript .
To resolve this issue, we highly recommend using the following CSS:
/* Custom Header Size
-----------------------------------------------------------------*/
.header-size-custom #logo img {
height: 40px;
}
@media (min-width: 992px) {
.header-size-custom #logo img {
height: 50px;
}
.header-size-custom .header-wrap-clone {
height: 90px;
}
#header.header-size-custom + .include-header {
margin-top: calc( -90px - 1px );
}
.header-size-custom.sticky-header-shrink #header-wrap #logo img {
height: 50px;
}
.header-size-custom .menu-container > .menu-item > .menu-link {
padding-top: 34px;
padding-bottom: 34px;
}
.header-size-custom.sticky-header-shrink .menu-container > .menu-item > .menu-link {
padding-top: 34px;
padding-bottom: 34px;
}
}Then simply add the .header-size-custom Class to the #header Tag.
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.
Perfect!
Glad the issue was resolved.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
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