How to create hover effect on header link and Remove the Header + Footer in Squarespace

In this Squarespace tutorial, you’ll learn how to create unique hover effects for the links in main menu of your website. There are four types of links you can have in your main navigation, and the codes for each one of them are listed below.

For second tutorial, I wanted to show you how to remove the header and footer from your entire website. Or, just from a single page. I see a lot of people do this when they want to create a landing page that doesn't have their main navigation, but has more flexibility than a cover page. This is going to be done using CSS, and I'll start by showing you how to remove the header and footer from the entire website.

CSS Custom : << hover >>

-- Main Links --
.header-nav a:hover

-- Active Page Link --
.header-nav-item--active a:hover

-- Folder Title --
.header-nav-folder-title:hover

-- Link Inside Folder Dropdown --
.header-nav-folder-item a:hover

====================================
CSS Custom : << remove header and footer >>

!! select one !!

//Bedford Family Templates//
#header, #mobile.bar, #footer { display: none!important; }

//Brine Family Templates//
.Header, .mobile-bar, .Footer {display: none!important;}