Locking the header in Squarespace can often be confusing, but fortunately it’s an easy fix.
This article will walk you through the process of using CSS code to create a fixed header in Squarespace 7.0 or 7.1 for use with Brine template family templates; other templates may or may not work similarly.
Header Position
Your header can often be one of the first things a visitor sees when they arrive on your website, as well as something they come back to throughout their visit. Therefore, it’s essential that logo and navigation remain visible at all times – an easy way of accomplishing this is using a fixed header in Squarespace.
To do this, navigate into your Site Styles and make the appropriate change. First click on Header menu; then scroll down until you reach “Fixed Position,” where there is an option called Basic that ensures your header remains at the top no matter how far visitors scroll down; with Scroll Back active it would remain until they reverse scroll back up again.
To create a semi-transparent background of your header, it will require CSS. There are multiple approaches you can take, depending on your site and its needs, but to be effective you will require at least some knowledge of CSS; editing code requires some knowledge as well; however, adding an “!important” tag ensures your changes take effect regardless of any other styles or tags that might already exist on your site.
Although Squarespace provides some effective default options, you can quickly customize the appearance of your header with just a few tweaks to give it a modern and sleek appearance. Doing this increases conversion by making sure navigation and logo remain always visible to visitors – especially helpful if your page requires visitors to scroll further in order to locate contact info or important links; something many online businesses rely on heavily for success.
Footer Position
Your website’s footer is an excellent place for visitors to access pages they need and want. This will save them from scrolling back up to the main navigation, keeping them on your site longer. In addition, this provides an ideal opportunity to display secondary navigation menu items as well as important pages like privacy policies and social links.
Subtitling your logo or branding to the footer of your website will help your visitors recognize who they’re dealing with and increase brand recognition. Furthermore, adding a contact form allows visitors to easily reach out.
Make your footer more user-friendly by including a search bar in it. Your visitors will quickly be able to locate what they’re searching for without having to click through your site, plus this way you’ll gain insight into what their interests are so you can adjust your content more appropriately.
Hide Footers on Individual Pages There are multiple ways you can use Squarespace to hide the footer on specific pages. One straightforward option is using the Footer Block from the Blocks panel and adding it directly into your layout.
CSS offers another means of disguising the footer: altering its style in your template’s code. To accomplish this, however, some knowledge of HTML and CSS will be needed – I have written an instructional tutorial about it here.
Customize the footer on individual pages by clicking Edit, hovering over the footer section, and selecting Edit Footer. Here you can edit text, background images and other styles that apply specifically to that section; additionally you can set how mobile devices display this footer section.
Header Padding
One popular search term in Squarespace is, “how to fix the header”. People want their navigation or logo to remain fixed as they scroll their website; typically this occurs when scrolling down. Fixing your header permanently (also referred to as sticky navigation) offers user-friendly advantages.
Squarespace does not provide a specific setting to make this possible, so some basic CSS will have to do the job. First, navigate to the page where you would like the header fixed at all times or only when someone starts scrolling back up toward the top. Hover over its header until a menu appears with “Edit Header”, select it, then “Fixed Position”. At this point select which option you would prefer: always or when someone starts scrolling back toward the top.
Adjusting padding depends on which version of Squarespace you’re using; versions 7.0 or earlier allow for adjustments through built-in options in the style editor; however, later versions require more complex methods that involve coding.
Use the classic editor to identify how much padding an element on your page has by clicking on it and viewing its style settings, which will show how much padding and space exists between it and its border or margin.
If you’re having difficulty with the built-in options for padding adjustments, perhaps it is time to turn to code! There are various methods you can employ but most will require altering HTML of your page. Keeping in mind what kind of padding you are trying to adjust and having some knowledge of CSS works can make the task much simpler; many resources online exist that can assist with getting you started with this endeavor so be sure to do your research first before diving in!
Footer Padding
Squarespace customers frequently ask how they can keep the header visible as they scroll down a page, which allows visitors to still access navigation and makes the website more user-friendly.
There are two methods available to you in order to achieve this: one being using the built-in options available within the Style Editor; and two being custom CSS code.
If you are using the classic editor, the first step should be to identify any extra blocks which might be creating blank areas in the text. This could include spacer blocks, code blocks or empty text blocks that might be contributing to blank spots in places they shouldn’t.
Altering individual elements’ padding settings is another effective way to minimize blank space. Padding refers to the space between content blocks and their borders, while margins refer to space around their edges. You can easily change padding by clicking the small pencil icon on the left side of your editor and selecting “Padding”.
Once you select “Padding”, you can customize its amount by top, bottom, left or right and also apply specific padding adjustments such as headlines or footers.
To set the header to remain at its current position, use the Edit button on any page, hover your cursor over its header until the button that says “Edit Site Header”, and enable “Fixed Header Style – Basic”. This will ensure it remains visible when scrolling back up towards the top, but will fade if scrolled away again.
To add a footer to any page, use the Edit button and hover your cursor over the footer area until you see “Edit Footer”. From here you can add content by clicking ‘Add Block, selecting its type, and adding it. Alternatively you could modify its layout with Edit Layout’ by changing width, alignment and spacing settings.
