How to create a sticky header in WooThemes Canvas

How to create a sticky header in WooThemes Canvas 2

We launched Canvas Extensions with Sticky Nav and straight away you started asking us about how to make the whole header area, including the logo sticky.

Well – this is how!

In this 5 minute demo of our newest Canvas Extension (imaginatively titled) Sticky Header, you can see how easy it is to do this with no coding!

You can buy Sticky Header from the PootlePress store.

We’d love to know what you think and if you have any suggestions…

12 thoughts on “How to create a sticky header in WooThemes Canvas”

  1. Nice one!
    Is it possible to integrate headroom to it, so that the sticky header disappears when scrolling down, and appears again when scrolling up? That would be an awesome feature, I think you could rise the price up with something like that…!

    1. Hi Luca, thanks for the suggestion. Not sure I understand though. Do you mean that it only appears while scrolling and when the user is down the page (but not scrolling) it disappears? Do you have an example site to look at? Could be a great addition!

  2. Looks awesome and a great timesaver! Is it also responsive so that it works on the mobile version? I don’t think I saw that in the video.

    1. Hi Sam, it doesn’t work on the mobile menu no. We are actually planning a separate mobile menu manager that should take care of that (and more!) but be more appropriate for the mobile menu and header area.So watch this space.

      1. since Canvas is a responsive theme. I would love the sticky header works on the mobile version too. Ideally, the sticky header on mobile is customizable and simpler version (shorter).

        How do I subscribe to get updates about your Canvas extensions?

  3. This is such a great plugin! Is there anyway to have your header with an image and logo above the primary navigation, and then when you scroll down the header image and logo goes away and the navigation stays at the top as you scroll, like this: Is there anything with code that I can do for this?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top