Guest Posted January 7, 2022 Share Posted January 7, 2022 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 Link to comment
jpeter Posted January 7, 2022 Share Posted January 7, 2022 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 Link to comment
Guest Posted January 7, 2022 Share Posted January 7, 2022 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! 🙂 Link to comment
Solution jpeter Posted January 7, 2022 Solution Share Posted January 7, 2022 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
Guest Posted January 7, 2022 Share Posted January 7, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment