Jump to content

SOLVED: Make text links underline when active

Recommended Posts

  • Replies 22
  • Created
  • Last Reply
12 minutes ago, derricksrandomviews said:

 

I modified text for the nav bar to normal text. I have not tried it yet, but if it doesn't work just remove it. 

.Normal/Paragraph Text: p a ul li.active-link a, .Normal/Paragraph Text ul li.active-link a:visited {
     border-bottom: 4px solid #000000;
 }

https://insidethesquare.co/squarespace-tutorials/style-hyperlinks-with-css

No it doesn't haha but thanks tho!

Link to comment

@Arch are you wanting the footer text/link to be underlined when you're on the current page? I.e. if you're on "Contact" page then "contact" is underlined?

Trying to use :active will only work so in the case of anchor links and a one page site. :active won't work when you navigate to a new page. 

Something like this would require JavaScript to style the currently active page. 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
6 minutes ago, ryandejaegher said:

@Arch are you wanting the footer text/link to be underlined when you're on the current page? I.e. if you're on "Contact" page then "contact" is underlined?

Trying to use :active will only work so in the case of anchor links and a one page site. :active won't work when you navigate to a new page. 

Something like this would require JavaScript to style the currently active page. 

yeh I mean I know that the code for the navigation bar is .header-nav-item--active for active items, but i wasn't sure if it's possible for text links and not navigations. I typed out the words in the footer and inserted the links so not sure if it would recognise whether that is the current page or not.

 

.sqs-block-html seems to target that footer block directly for me to be able to just remove the underline from the links in the footer, but I'm not sure how to code it for an active link

Link to comment
34 minutes ago, ryandejaegher said:

@Arch

.arch-style {

}

 

This goes into the custom CSS, not into the code injection. 

yes i put this in custom css, but the page you shared required putting the below into footer code injection too, i did both but it didn't work

 

I put this into code injection

<script>
   
  (function() {
   
   
  window.addEventListener('load', function(){
  var navLinks = document.querySelectorAll('header a, footer a');
  var getActiveLink = navLinks.forEach(item => {
  if(item.href === window.location.href) {
  item.classList.add('arch-style')
  console.log(item)
  }
  })
  })();
  </script>

And this into custom css

.arch-style {
  border-bottom: 2px solid #000000 !important;
}
Link to comment

@ryandejaegher OMG IT WORKED THANK YOU SO MUCH!!!! YOU SAVIOUR!!

Is there a way to apply it to the links in this picture? The All, New Arrivals, T-Shirts etc line. They are just body text that I created and are not a menu or anything.

It would be better to have it consistent on all links across the site. I know how to turn the navigation in the header on but not sure about the body?

image.thumb.png.581d9d2f1bbad207a2e93adacfed003b.png

Link to comment
2 minutes ago, ryandejaegher said:

@Arch, are referring to adding the link styling to the product links, or adding the :active styling to the product links?

The category links in the second line below the logo (all, new arrivals, t-shirts, sweatshirts, hoodies, hats) were created by me typing it out in a textbox (because I wanted to control the order of it rather than follow the squarespace default of alphabetical order) so they are all just normal text hyperlinks in the body of the page. Would I be able to use this code for those body text links? As there is only code injection for the header and footer... I would like to have these links underlined when those pages are active just like in the footer. Is it possible?

Link to comment

@Arch Code updated, copy and paste again. 

Just a heads up it looks like your announcement bar/header are slightly sitting on top of those links which can make it difficult to click. You may need to add some margin-top to those links to ensure the header isn't covering it. 

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
5 minutes ago, ryandejaegher said:

@Arch Code updated, copy and paste again. 

Just a heads up it looks like your announcement bar/header are slightly sitting on top of those links which can make it difficult to click. You may need to add some margin-top to those links to ensure the header isn't covering it. 

 

OMG YOU ARE A SAVIOUR THANK YOU SO MUCH!!!!!  Is there somewhere I can donate to you or "buy you a coffee"?

My boss didn't want so much white space between the header and the links so I removed the margin and it looks fine on my screen though, as per the screenshot i attached earlier, even on different browsers it's still fine for me hmmm, does it look different on yours?

Link to comment

@ryandejaegher I'm really sorry, one last thing. My header navigation is now acting up a little for some reason. The Shop is fine with the underline as per the default  but the other pages now have a double line which it didn't have before, do you think it has something to do with the code?

 

image.png.8502cb5f67500e2beeb7297497659d7d.png

image.png.8f0a2deb88773cd873ee1e7efae52d58.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.