Jump to content

Add notification-style dot to header link

Go to solution Solved by jpeter,

Recommended Posts

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

sample.jpg

Link to comment
  • Solution
46 minutes ago, DustinWilliam said:

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

 

@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;
}

 

Link to comment
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;
}

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.