Designing fixed headers

When you use the theme layout to design your own header, you have the option to select a "Fixed Header". This will ensure that your logo and menu in the header stay visible as a user scrolls the website.

Video walkthrough

In this video, we unpack:

• Best practices
• How to design a header
• How to make it mobile friendly
• CSS trick for larger fixed headers

Watch the video below to follow along:

CSS Snippet

If you wish to use the CSS snippet illustrated in this video, please use the following with care:

.fl-theme-builder-header-shrink .scrollhide {
    display: none;
}