Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Arch

SOLVED: Make text links underline when active

Question

Posted (edited)

Site URL: http://www.arch-worldwide.com/home

Hello,

I've removed the underline for the links in the footer using the below code.

.sqs-block-html a {
  background-image:none!important;
}

 

However, I would like the active link to be underlined. Is this possible even though they are text links and not a navigation bar?

 

Edited by Arch
solved!

Share this post


Link to post

22 answers to this question

Recommended Posts

  • 1

@Arch You can use this code and it will add a class "arch-style" that you can use to style your footer links when active.

https://gist.github.com/ryandejaegher/76414a7d76ae4d5491e3b5bebd211e5c

image.png.198f6444b88222d8eaafdf5c95bb196e.png


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

Share this post


Link to post
  • 1

@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

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

Share this post


Link to post
  • 1

@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

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

Share this post


Link to post
  • 0
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!

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
Posted (edited)
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;
}
Edited by Arch
explanation

Share this post


Link to post
  • 0
7 minutes ago, ryandejaegher said:

@Arch, can you share a screenshot of your code injection? If you're comfortable you send an invite to the site and it'll be quicker for me to troubleshoot. 

I literally just copied and pasted it in.

image.thumb.png.089d16d6b5e3159e62bb3fdb2cdda27d.pngimage.thumb.png.ed785ce5abe87f0b1d3df2bff835cff0.png

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0
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?

Share this post


Link to post
  • 0
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?

Share this post


Link to post
  • 0
Just now, ryandejaegher said:

@Arch, weird now it seems to be working haha. 

Thank you so muchhhh you are amazing, let me know if you have a donation or "buy a coffee" kind of link haha 

Share this post


Link to post
  • 0

@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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...