How to create a sticky header in WooThemes Canvas

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…


Comments

12 responses to “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?

        1. Hi LiewCF – it’s a really good suggestion and we have lots of people asking for it… may well put it in to Sticky Header soon (as well as our Mobile Menu Manager). For now subscribe here for updates for Canvas Extensions: http://goo.gl/16RRkJ

          Thanks! 🙂

  3. Nice idea! Fun for the right client.

  4. Great video, Nick, and a great Canvas extension. I look forward to playing with that on client sites. I love how you guys are developing the options we have with the theme. Thanks.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Great, tks for the feedback Stephen 🙂

      Jamie

  5. 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: http://www.tested.com/ Is there anything with code that I can do for this?

    1. Hey Lucas – the simple answer is yes! It’s a different plugin we developed before Sticky Header called Sticky Nav – https://www.pootlepress.com/shop/sticky-nav/. It just makes the nav sticky and not the whole header.

      Let me know if that’s not what you mean.

Leave a Reply

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