Categories
Squarespace

How to achieve Sticky Header in Squarespace Brine Family Templates [Video]

Cheap and easy Video Content Marketing

How to achieve Sticky Header in Squarespace Brine Family Templates

Some of my own clients, as well as my own site have come across the question of if we should make our site’s header “sticky headers”, depending on the layout and user-mobility of your site, and your preferred style. A Sticky Header allows you to have your header stay at the top of your site as your viewers scroll.

Watch my video tutorial above on how to do it, and thennnnn check down below for the code that I used, to copy + paste for your own use.

Here’s the code I used in my video tutorial;

/* Fixed Header */
.Header {
position: fixed;
z-index: 9999;
width: 100%;
top: 0px;
}
.Content-outer {
margin-top: 50px;
}

Watch/Read More

Categories
Squarespace

Brand new to CSS? Awesome! 😍 I want to teach you the basics - check out my free training here 👉 https://insidethesquare.co/learn-css---This tutorial is for any version of Squarespace, 7 or 7.1!---This tutorial will show you how to add a time zone after the time listed for events in your Squarespace website I also wanted to share some clever code you can use to style the date displayed on the event list thumbnail. A few important things to note before you copy and paste this into your own site:+ The time zone will be displayed on the events list AND the individual events page - anywhere time is listed for that event will have the text added to the end of it. + There is more than one way to do this! This is just one approach of many because code is super customizable. + There are a TON of creative things you can do with border codes. To learn more about borders, visit https://insidethesquare.co/borders+ I am using color names in this tutorial, but color codes like RGB, HEX, and HSL will work too. To learn more about color options, visit: https://insidethesquare.co/colors→ Add time zone to events listing.event-time-12hr:after{content:" PST"}→ Customize the event date: must be set as a “side tag” in 7.1.eventlist-datetag{border-radius:50%; box-shadow: 5px 5px 15px rgba(0,0,0,0.2); background-color:purple; color:#yellow}▸▸▸ Ready for more? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://insidethesquare.co/css▸▸▸ Ready to be an expert?Copy & pasting CSS is a great way to get started, but if you really want to level up your skills and write your own code, then you're ready for the Custom Code Academy. I created this course to teach you everything I know about CSS for Squarespace. Enrollment is open right now, and access lasts a lifetime. Join the academy today at https://customcodeacademy.com---#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacksThe term "Squarespace" is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.