Show a Navigation Link on Desktop, Hide on Mobile

In this tutorial, I explain how to use custom CSS to control which navigation items are visible on desktop and mobile devices in Squarespace 7.1.

The CSS Code

/* Desktop: show 1st nav item, hide 2nd */
@media screen and (min-width: 768px) {
  .header-nav-item:nth-child(1) a {
    display: inline-block;
  }
  .header-nav-item:nth-child(2) a {
    display: none;
  }
}

/* Mobile: show 2nd nav item, hide 1st */
@media screen and (max-width: 767px) {
  .header-menu-nav-item:nth-child(1) a {
    display: none;
  }
  .header-menu-nav-item:nth-child(2) a {
    display: inline-block;
  }
}

How It Works

Desktop View (768px and above)

• Media Query: @media screen and (min-width: 768px) targets screens with a width of at least 768 pixels.

• First Navigation Item: The selector .header-nav-item:nth-child(1) a displays the link by setting display: inline-block.

• Second Navigation Item: The selector .header-nav-item:nth-child(2) a hides the link with display: none.

Mobile View (767px and below)

• Media Query: @media screen and (max-width: 767px) applies the rules to screens with a width of 767 pixels or less.

• First Navigation Item: The selector .header-menu-nav-item:nth-child(1) a hides the link.

• Second Navigation Item: The selector .header-menu-nav-item:nth-child(2) a displays the link by setting display: inline-block.

Implementation Steps

1. Access the Custom CSS Panel:
   In your Squarespace 7.1 account, go to Design > Custom CSS.

2. Paste the CSS Code:
   Copy and paste the provided CSS into the editor.

3. Save Changes:
   Click ‘Save’ to apply the custom CSS to your site.

4. Test Responsiveness:
   Use your browser’s developer tools or an actual device to verify that the navigation items appear correctly on both desktop and mobile views.

This approach helps to ensure that the appropriate navigation links are visible based on the device, providing a better user experience across platforms.