Trevor Hatfield

Offering effective calls-to-action is a key driver for a successful website, so it’s imperative to make sure that these focal points are free from distractions. Here at Inturact, we noticed that our comments form seemed to take up quite a bit of space at the bottom of our blog posts, detracting from our more important call-to-actions. Instead of re-styling this form to be less intrusive, we decided to put it in a dropdown to hide the comment, unless the reader was interested in viewing them or… Show more

Offering effective calls-to-action is a key driver for a successful website, so it’s imperative to make sure that these focal points are free from distractions. Here at Inturact, we noticed that our comments form seemed to take up quite a bit of space at the bottom of our blog posts, detracting from our more important call-to-actions. Instead of re-styling this form to be less intrusive, we decided to put it in a dropdown to hide the comment, unless the reader was interested in viewing them or submitting one of their own. To quickly implement this on our own site, we modified a blueprint tutorial from Codrops called Nested Accordions to fit our needs. By utilizing the provided markup and files to build a solution around our comments section of the blog post template in the Design Manager, we were able to achieve the desired effect. You can view a demo of the comments at the bottom of our blogs here. Show less

Your website's navigation is one of its most important elements, as it defines how users will be able to find the information they seek on your website. Your navigation must allow users to quickly reach the pages they need to access. A great way to increase the usability of your site’s navigation is by utilizing a fixed header. As a user scrolls down your page, a fixed header enables the navigation to stay with the user, making other pages on your site easily accessible without the need to… Show more

Your website's navigation is one of its most important elements, as it defines how users will be able to find the information they seek on your website. Your navigation must allow users to quickly reach the pages they need to access. A great way to increase the usability of your site’s navigation is by utilizing a fixed header. As a user scrolls down your page, a fixed header enables the navigation to stay with the user, making other pages on your site easily accessible without the need to tediously scroll all the way back to the top.

In this post, we will show you how to implement an animated fixed header on your HubSpot COS site. To give us a head start, we modified a blueprint tutorial from Codrops called On-Scroll Animated Header. The provided files and markup within this tutorial allowed us to build a solution for our site. You can view a demo of the finished product here. We also use a fixed header on our site that you can view as a real life example here. Show less