Desktop & Mobile Navigation

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors:

Squarespace Element Description
The Website Header The main header element at the top of each page, including the different header styles: Solid, Gradient, Theme and Dynamic.
Desktop Header Elements The desktop header display and all of its elements, including the site title or logo, the CTA elements and the navigation menu items.
Mobile Header Elements The mobile header display and all of its elements, including the site title or logo, the CTA elements and the navigation menu items.

CSS Code Snippets for Customizing the Header 

Adding dropdown indicators to folder menus

// Start: Add dropdown indicator
.header-nav-folder-title:after {
  content: "\25be";
  display: inline-block;
  margin-left: 2px;
}
// End: Add dropdown indicator

Change the text color of links on hover

//Start: Change Nav Link Text Color on Hover
.header-nav-list a:hover {
  color: coral !important;
}
//End: Change Nav Link Text Color on Hover

Change the color of the background & link text on hover

// Start: Navigation background hover effect
.header-nav-item:hover, .header-nav-folder-item:hover {
  background: black;
}
.header-nav-list .header-nav-item:hover > a, .header-nav-list .header-nav-folder-item:hover a {
  color: white;
}
.header-nav-item {
  padding-left: 10px;
  padding-right: 10px;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0;
}
.header-nav-folder-content .header-nav-folder-item a {
  padding: 10px;
}
// End: Navigation background hover effect

Add a border to dropdown folders

// Start: Add border to dropdown
.header-nav-folder-content {
  border: 1px solid #000000;
}
// End: Add border to dropdown

Add a slight delay to the desktop hover menus for increased user friendliness

// Start: Folder menu delay
@transitionDelay: .32s;

body:not(.sqs-edit-mode-active) .header-nav-item--folder .header-nav-folder-content {
  transition: opacity 0s linear @transitionDelay,visibility 0s linear @transitionDelay,z-index 0s linear @transitionDelay,max-height 0s linear @transitionDelay,max-width 0s linear @transitionDelay;
  -moz-transition: opacity 0s linear @transitionDelay,visibility 0s linear @transitionDelay,z-index 0s linear @transitionDelay,max-height 0s linear @transitionDelay,max-width 0s linear @transitionDelay;
  -webkit-transition: opacity 0s linear @transitionDelay,visibility 0s linear @transitionDelay,z-index 0s linear @transitionDelay,max-height 0s linear @transitionDelay,max-width 0s linear @transitionDelay;
  visibility: hidden;
  pointer-events: all;
}
body:not(.sqs-edit-mode-active) .header-nav-item--folder:hover .header-nav-folder-content {
  transition: opacity .1s linear @transitionDelay,visibility .1s linear @transitionDelay,z-index .1s linear @transitionDelay,max-height 0s linear @transitionDelay,max-width 0s linear @transitionDelay !important;
  -webkit-transition: opacity .1s linear @transitionDelay,visibility .1s linear @transitionDelay,z-index .1s linear @transitionDelay,max-height 0s linear @transitionDelay,max-width 0s linear @transitionDelay !important;
  -moz-transition: opacity .1s linear @transitionDelay,visibility .1s linear @transitionDelay,z-index .1s linear @transitionDelay,max-height 0s linear @transitionDelay,max-width 0s linear @transitionDelay !important;
  z-index: 10;
  visibility: visible;
}
// End: Folder menu delay

Replace mobile menu icon with label text

// Replace mobile menu icon with text
//Variables
@mobileMenuLabel__Background: black;
@mobileMenuLabel__FontColor: white;
@mobileMenuLabel__MenuLabel: "Menu";
@mobileMenuLabel__OpenMenuLabel: "Close";

button:not(.burger--active) .burger-box:after {
  content: @mobileMenuLabel__MenuLabel;
  background: @mobileMenuLabel__Background;
  padding: 8px;
  border-radius: 6px;
  color: @mobileMenuLabel__FontColor;
}
button.burger--active .burger-box:after {
  content: @mobileMenuLabel__OpenMenuLabel;
  background: @mobileMenuLabel__Background;
  padding: 8px;
  border-radius: 6px;
  color: @mobileMenuLabel__FontColor;
}
.burger-inner {
  display: none;
}
// Replace mobile menu icon with text

Change the fill color of social media icons on hover

//Start: Change the fill color of social media icons on hover
.header-actions-action--social .header-icon:hover svg {
  fill: magenta;
}
//End: Change the fill color of social media icons on hover

Change the background color of “Solid” social media icons on hover

//Start: Change the background color of  “Solid” social media icons on hover
.header-actions-action--social .header-icon.icon.icon--fill:hover {
  background-color: magenta;
}
//End: Change the background color of  “Solid” social media icons on hover
Previous

CSS Basics for Beginners
Next

Footer