PRO Sticky Header Start at Bottom, Move to Top

Support
#1

In the PRO Header/Footer Introduction video, it shows where the logo and navigation starts at the bottom of the header and slides up to the top as a person scrolls down the home page. I have several questions.

  1. How do visitors react to this when interacting with the website?
  2. How does this work on a mobile device (phone/tablet) or do you have to program differently for mobile?
  3. Has anyone created a template or is there a template for this type of header in the design cloud? I’ve looked and couldn’t find any.
#2

Hi Jeff,

1- I did not understand the question, unfortunately, the method mentioned in the video is called the sticky header which it keeps showing the header for the convenience of the user to go around the website using the navigation.
2- You can keep that on the mobile device or decide to use another method instead. The Hide During Breakpoint feature will give you the opportunity to hide the feature on mobile and present the header another way on mobile.
3- There is no Sticky header template in Design Cloud at the moment, we will add additional headers during the course of time.

Thank you.

#3

Christopher … Thank you for your response.

I’ve have been seeing a lot of luxury brands putting their ‘logo and navigation’ at the bottom of the home page header. However, I have not seen the movement of that logo and navigation from the bottom of the screen to the top of the screen until watching the PRO Header/Footer Introduction video.

I’m definitely in favor of sticky (fixed) headers and most of the articles about sticky headers state best practice is to keep them in one place. I like the concept of the moving (bottom to top) sticky header as shown in the video, and would like to incorporate it into a site design.

In discussing this concept with some people, they asked; how have visitors reacted to this movement of the logo/navigation from the bottom of the screen to the top of the screen once scrolling starts? Has the movement created positive or negative comments or reactions like more engagement, staying longer, or immediately leaving?

I hope I have explained my question so that you better understand it.

#4

Hi Jeff,

Yeah about this header effect.


You can recreate that with the DEMO HEADER 23 as the base template. You then need to interchange the first and the second bar, so the navigation bar is under the banner.


Then you need to enable the Sticky Bar option and set the Shrink Amount to have that scrolling effect on the navigation bar

Sorry, we can not answer that, we have not done any study on how people react to those design/effects.

Hope this helps somehow,
Cheers!

#5

Thanks for the assistance. It’s greatly appreciated.

#6

You’re welcome, Jeff. Glad we’re able to help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.