How “New” badge in main nav in Squarespace (7.1) in Squarespace

1. Add this code to CSS

  • Paste the code: Paste the provided CSS code into the Custom CSS block.


// WWW.SQUARESPELL.CO.UK //
div.header-nav-item:nth-child(X) > a {
    position: relative;
}
div.header-nav-item:nth-child(X) > a:after {
    content: "New"; /* Badge text */
    position: absolute;
    top: -10px; /* Adjust vertical position */
    background-color: red; /* Badge background color */
    color: white; /* Badge text color */
    font-size: 12px; /* Font size for the badge */
    padding-left: 5px; /* Left padding */
    padding-right: 5px; /* Right padding */
    border-radius: 5px; /* Rounded corners */
}
// WWW.SQUARESPELL.CO.UK //

How to Use the CSS Code for the "New" Badge

  • Change the nth-child Number: Update the number in nth-child(X) to target the correct navigation item based on its position.

  • Badge Customization: Modify the CSS properties (like background-color, color, font-size, etc.) to customize the badge's appearance according to your website design.

To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!