Fixed Headers & Nav. for Squarespace.

Fixit is a plugin for Squarespace.
It keeps headers, navigation and/or announcement bars on-screen all the time.

Fixit for Squarespace makes it easy to set fixed/sticky headers, navigation and announcement bars. It also enables “on-scrolled” header effects such as change of background-color, height, opacity, etc. A copy of the code is purchased for each site and it can be added by code-injection (or by file upload for "Personal" plans).


If you have any questions, just send a message.


Purchase

Get your copy of Fixit: Fixed Headers made easy!

Fixit is currently only available for the Brine/Wright family of templates. If you use another template and you’d like to use Fixit, just ask.

$30

Purchase Now

Features

Fixit can be added to any Squarespace site that is based on the Brine/Wright family of templates. When adding the code to your site, you specify which elements in the header you want to be fixed via the settings at the end of the plugin’s code - it’s easy.

Here’s an example site with Fixit added.

  • Set fixed/sticky navigation, whether in the top or bottom sections of the header.

  • Set the entire header to be fixed or set only particular elements of the header to fixed. For example, you could set only the announcement bar to be fixed, or only the lower section of the header, etc.

  • Control fixed header/navigation elements independently between desktop and mobile views/widths.

  • Enables “on-scrolled” header effects such as changes to background color, logo size, header height, opacity, etc. (see limitations below).

  • Fixit maintains proper fixed position in all contexts. For example: whether the announcement bar is enabled or not, visible or closed, etc.

  • It avoids undesirable overlap of page content, a typical issue with other solutions.

  • Fixit also maintains proper fixed position of the header/navigation when browser/screen width or orientation changes.

  • When using anchor links (also known as “jump links”) whether on the same page or a different page, Fixit can prevent the header from covering up the content the user arrives to.

License

Limitations

  • Your copy of Fixit is paired to the custom domain you specify when you order. Changing your custom domain will cause it to no longer work.

  • On-scrolled effects on the header such as opacity, color or size changes require custom CSS to be written in addition to adding the plugin. This gives you maximum flexibility to get the effect you want (instead of hard-coding it into the plugin). If you’re comfortable with CSS, it’ll be easy for you. If you’re not comfortable with CSS or need help, just send me a message after you order. Describe what you need and I’ll be happy to write the CSS for you in a way that allows you to tweak from there.

Usage

The Fixit code should be added via Sitewide Footer Code Injection, on Squarespace "Commerce" and "Business" plans or via file management for "Personal" plans.

  1. Your copy will be delivered to you as a text file, via email, within 48 hours of submitting your order.


  2. Edit the settings at the very end of the script based on what elements you want fixed. Set all to 'true' to fix all elements in the header. Set to 'false' to leave them as they are:

      mobileHeader: true,
      announcementBar: true,
      desktopHeaderTop: true,
      desktopHeaderBottom: true

  3. Add the code:

    • If installing via code injection:

    • Or, if installing via file upload (for "Personal" plans without code injection):

      • Rename the fixit.txt file you received to fixit.js . Be sure the file is named prior to uploading, and that it is named exactly that: fixit.js

      • Delete the opening and closing <script> and </script> tags (the first and last lines) from the code within the file, and save.

      • Upload the file via file management.

      • Add the following code to a Markdown Block in the footer blocks of your website: <script src="/s/fixit.js"></script>

    • Or, if using Developer Mode, strip the unnecessary HTML from the script and include it with your scripts (always set "combo='false'" if using <squarespace:script>).


  4. If fixing the announcement bar and the mobile navigation, ensure that you have disabled the "Fixed Mobile Top" setting in the style editor. Also, only use either Fixit's fixed mobile header OR Squarespace's (within Style Editor), but not both. One or the other should be disabled.

  5. If you previously added code to your site to attempt to add a fixed header, you may want to remove it; it might conflict with Fixit.

  6. If using "on-scrolled" effects, simply use the ".isScrolled" class in your CSS to define the styles you want when the user is scrolled down. Fixit adds the class to the body element when the user has scrolled past the amount you specify in the isScrolledDistance setting. For example, the Fixit example site uses the following CSS in addition to the Fixit plugin.
.sqs-announcement-bar-dropzone, .Header--top, .Mobile-bar {
  opacity: 1;
  transition: all .7s ease;
}

.isScrolled .sqs-announcement-bar-dropzone, .isScrolled .Header--top, .isScrolled .Mobile-bar {
  opacity: .8;
}

Tips & Troubleshooting

  • Please use Fixit responsibly: don't bother Squarespace Support with questions related to it.

  • Fixit is currently only available for the Brine/Wright family of templates.

If you have any questions, just send a message.

!Thanks for visiting our website. You're using a very old browser and it's preventing this website from displaying correctly. To view this website, please upgrade your browser.