How to Create a Sticky Header with CSS

Sticky Notes

One of the most frustrating aspects of using free WordPress themes is that the one feature you would like is only available in the Pro version. Sydney (the theme that I use for this website) is an exception to that. Thank you Sydney Developers!

A particular favourite of mine is Astra. Its lightweight, well-written and an excellent starting point for a website. However, the stick header option is only available in the Pro version.

Well, I have found the perfect way out. Adding the following Additional CSS to the free Astra theme will give you the sticky header you were looking for for free!

/*Make Header Sticky*/
.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

/*Adjust Content Padding*/
.site-content {
    padding-top: 75px;
}

/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
    .site-content {
        padding-top: 175px;
    }
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
    .site-content {
        padding-top: 200px;
    }
}

/*Make Header White and Transaprent*/
.main-header-bar {
    background: rgba(255,255,255,.75);
}

I wouldn’t advise doing this if you wanted other Pro features of Astra, but if all you want is a sticky header, its just the ticket.

Leave a Reply

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