Add an attractive navigation bar to your Squarespace website that stays put as visitors scroll. With this CSS customization, your visitors will quickly locate what they need!
Some templates in version 7.0 and older stack vertically on mobile devices. This guide offers ways to configure specific mobile styles for these elements using built-in settings.
Navigation Bar
Your mobile experience is of utmost importance, and navigation of your website plays a large part. Over 50% of web browsing occurs on mobile devices – that means your navigation must be optimized specifically for their use.
Squarespace does an outstanding job at optimizing your site for mobile, with numerous built-in options and advanced mobile navigation features that support this functionality. There are, however, a few additional steps you can take to enhance mobile navigation even further.
One of the key steps you can take is to develop a mobile information bar. This simple tool displays key business details like phone number, email address and physical location on your website – ideal when there are multiple locations as it helps visitors quickly locate what information they require.
Add a fixed header to your website as another way of improving mobile navigation, and prevent your menu from disappearing when viewers scroll down the page. Although this solution requires more work than using built-in options, it will result in a much more polished overall appearance and feel for your site.
To create a fixed header, a custom CSS code snippet must be written. This snippet will ensure that the header always remains at the top of the screen no matter where your viewer navigates on your site. To accomplish this task, open up your Site Properties area of your website’s Custom CSS editor and paste in this snippet of code:
Once you have added the code snippet to your website, save and publish. For this method to work effectively, a minimum Business plan is required. If any questions arise regarding this tutorial or its implementation, feel free to reach out and I would be glad to walk through everything with you personally! Or book an individual consultation here.
Header
One of the more frequently asked Squarespace questions concerns how to lock a mobile site’s header as visitors scroll down through it, commonly referred to as fixed navigation. This feature allows visitors to quickly and efficiently access your main menu as well as other important content on your site.
Your mobile header feature can easily be enabled in the Settings. Simply click “EDIT SITE HEADER,” “STYLE,” and “FIXED POSITION”. Additionally, you can choose whether the header will remain visible when your visitors scroll down the page or only as they scroll back towards the top.
Your header offers four options for displaying your site title and logo (see Displaying Your Title or Logo), while mobile header bars allow for links that open into full-width pages. Some templates also support search icons as well as providing visitors with access to contact forms or sending you emails directly.
Ecommerce sites can benefit from using mobile header bars to display store name, phone number and location as well as links to cart and checkout in their mobile header bars. In addition, store header icons may be customized according to product category with unique styles for mobile display.
All these features can be found in the Site Styles editor for versions 7.0 and earlier, and are automatically activated when your website is viewed on mobile devices. You can learn more about them and view examples by reading our Guide to Creating Site Styles.
If you’re looking for more ways to enhance the appearance of your mobile site, there are numerous tutorials from other Squarespace designers and custom CSS snippets that can help. One such snippet gives mobile announcement bars an animated gradient effect which will catch visitors’ eyes!
Dropdown Menu
A navigation header is a crucial component of any website and it should be easily found by visitors. As users scroll down on a mobile device, though, oftentimes this important component disappears out of sight – creating a fixed header is an easy solution that ensures it remains visible and accessible as you scroll.
Squarespace 7.1 now features an inbuilt option to create a fixed header with basic functionality. To activate it, click “Edit” in the top left corner of your site preview, hover over any header and you should see an “Fixed Position” toggle button appear; click this toggle button and choose either a basic fixed header that stays at the top of your page or scroll back functionality that remains fixed even as you scroll further up the page.
Both options can add convenience and user friendliness to your navigation, yet if you want to take your customization one step further there are a few code snippets which can make this feature even more useful.
At first, you’ll need to assign the menu icon a custom class in order to identify it as a dropdown menu. This can be accomplished by adding this snippet of CSS:
This code snippet adds a shadow behind your menu and highlights its text, making it easier for users to distinguish it from the rest of your content. Furthermore, it ensures that it remains visible no matter how far down your page they scroll.
Another way to enhance the appearance of your dropdown menu is to change its background color. This can help your text stand out more against dark backgrounds by replacing its default background-color snippet with one of your choosing. Simply replace “default_background_color” in your code with one that satisfies you!
If you are using a theme with folders in its dropdown menu, adding borders around them can make them more noticeable and help visitors recognize they are open pages. This is particularly beneficial for businesses with numerous services or departments they need to categorize into main categories – for instance Visy had many departmental pages which needed organizing into groups; by adding borders around these folders we made it much clearer which pages are open and which aren’t.
Footer
An effective way to add a clear call-to-action (CTA) bar to your Squarespace website is creating one at the top of its mobile version. This CTA bar can encourage visitors to subscribe to your newsletter, contact you directly, or link directly to other pages on your website. This guide offers an easy, simplified CSS and JavaScript code snippet which you can add through either Squarespace’s built-in editor or by hiring an outside developer for more complex solutions.
With more and more people accessing websites from mobile devices, it’s increasingly essential that your Squarespace site is optimized for mobile visitors. Although all templates available from Squarespace automatically adjust to fit different browser windows, some site elements may still be less visible depending on if responsive design isn’t being utilized. In this blog post we will look at ways you can modify various site elements within Squarespace mobile such as navigation bars, headers and footers.
Squarespace 7.1 makes activating a fixed navigation menu simpler than ever. Simply click EDIT in the top left of your website preview, hover over your header area, and toggle off Fixed Header toggle button – your site now has a fixed navigation menu with always visible, scroll back or basic options!
Based on your chosen header style, you may wish to adjust some global settings that will affect both desktop and mobile header views. These may include site title, default logo image and color theme & style settings as well as whether to show or hide header search and made/powered by Squarespace text.
Squarespace’s responsive design automatically stacks blocks vertically on mobile, in order to conserve space and preserve your page layout on smaller screens. However, you may wish to turn off this feature for mobile websites containing multiple columns of content which work better displayed as single columns.
