Ask a Question ?
Design & Publish Websites Faster

Make Your Header Always Visible with a Sticky Header

In this website builder post, we’ll show you how to make your header “stick” to the top part of your screen. Much like the sticky footer, wherever you move in your page, your header will always be showing.

Open the URL/Custom Tracking Code Panel

The first thing you should do is login to your site.

Once you’re there, click on More from the shelf. From the menu that’ll open up, select the “URL/Custom Tracking Code” option.

The More menu with the custom URL option highlighted

Click on the More menu and then “URL / Custom Tracking Code”

Note: even though we are using a code, we’re not pasting in an embed app because that’ll only make the header sticky for the page where the app is. If what you want is to make the header sticky for just one page, go ahead and use the embed app. If you want to make it sticky for the entire site, you’ll need to follow the instructions in this post.

Get the Code

Copy the following code:

 

Or you can copy it from here.

Paste it on the Custom Analytics field.

Custom Analytics field

Paste the code on the Custom Analytics field

That’s it!

You’ll just need to save to finish. To check if it’s working correctly, you’ll need to publish your site (you won’t be able to see your sticky header on editor or preview mode).

To publish your site, click on the green “Publish!” button on the shelf. Then log out or use a different browser to view your site and your new sticky header!

Did you find this post useful? Let us know in the comment section below.

Menu