Add notification-style dot to header link

Site URL: http://dustin.land

Hey all!

I'd love your coding help with adding an iOS style notification dot to any of my header nav links. See mockup attached.
The 'Collections' page noted is hidden, however any sample code you made can be to any page link. 
I do NOT have access to code injection on my plan so this will have to be css or some other means to make this happen.

Any assistance at all would be more than appreciated! Thank you all for for your wisdom and help!

Dustin

You can use the following CSS below to add it to active links.

CSS

.header-nav-item--active {
  position: relative;
}

.header-nav-item--active:after {
  content: '•';
  position: absolute;
  color: #60ffed;
  top: -3px;
  right: -8px;
}

See article on how to add CSS: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site

Thank you! This works!
Instead of an active page, but rather a specific page, to have the dot be persistent active or not - how would I address that?

I've also made the 'Collections' page linked and active - that's the link I'd like to always have the dot on.

https://www.dustin.land/collections

Thank you! 🙂

23 minutes ago, jpeter said:

Thank you so very much! This answers my question! Works perfectly! 🙏

 

@DustinWilliam You can use the following CSS to target specific items in the nav using the nth-child() property. It allows you to target the position of an item amongst its siblings. The CSS code below  shows you two examples of how to apply the styles to a single item or multiple. 

CSS

.header-nav-item {
  position: relative;
}

/* Targets a single item  */
.header-nav-item:nth-child(1):after {
  content: '•';
  position: absolute;
  color: #60ffed;
  top: -3px;
  right: -8px;
}

/* Targets multiple items  */
.header-nav-item:nth-child(1):after,
.header-nav-item:nth-child(3):after,
.header-nav-item:nth-child(4):after {
  content: '•';
  position: absolute;
  color: #60ffed;
  top: -3px;
  right: -8px;
}