Canvas Support

Header behaviour like "medium.com"

3 replies · opened Jan 11, 2018

CcanadahealthsolutionsJan 11, 2018

Hello Team,
Though there are various look and behavior is included in Canvas HTML headers.
Is it possible to get out of the box the header behavior that we see on "medium.com"

Medium.com header behavior

  • Header goes up with the page as the user scrolls down.
  • The moment the user scrolls up the header appears (slides down) on top of the content.

Thanks in advance for the help.

Nice product, keep up the good work.

CHS

SSemicolon WebSTAFFJan 22, 2018

Hello,

Thank You so much for the Kind Words! :)

While, this is an experimental functionality and not supported out of the box, a Template is already include within the Package/HTML Folder with the name: header-sticky-on-scrollup.html .

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.

CcanadahealthsolutionsMar 29, 2018

Awesome! Thanks a lot.
It is working as expected on Desktop.

Only problem is it's not working on Mobile — where it's more meaningful and necessary, because of less real-estate.
What may have causing this issue?

Thanks
CHS

SSemicolon WebSTAFFApr 6, 2018

Hello,

Thanks for your Patience!

Simply update the CSS in the Document <head> with the following code: 

#header.sticky-on-upscroll #header-wrap {
	-webkit-transition: height .4s ease, opacity .3s ease, top .4s ease;
	-o-transition: height .4s ease, opacity .3s ease, top .4s ease;
	transition: height .4s ease, opacity .3s ease, top .4s ease;
}

#header.sticky-on-upscroll.sticky-header #header-wrap,
#header.sticky-on-upscroll.responsive-sticky-header #header-wrap { top: -60px; }

#header.sticky-on-upscroll.show-sticky-onscroll.sticky-header #header-wrap,
#header.sticky-on-upscroll.show-sticky-onscroll.responsive-sticky-header #header-wrap { top: 0px; }

and add the .sticky-responsive-menu Class to the <body> 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.

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