SOLVED: Make text links underline when active

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?

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

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!

I will work on it. Just remember its hard to target just a bit of text, any link will change with the same h designation. You can narrow it down to a page by placing code there instead of custom css. 

@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. 

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

9 minutes ago, ryandejaegher said:

@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

Hmmm i injected the code to the footer and tried 

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

but it doesn't seem to work 😕

@Arch

.arch-style {

}

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

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

And this into custom css

@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. 

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.

Hey @Arch my bad, looks like I was missing a ). I've updated the code in that link, you should be able to copy paste it now. 

@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?

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

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?

@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. 

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?

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

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 

@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?

@RyanDejaegher It seems the the logo now also has an underline when I'm on the homepage, is there a way of removing this on the logo?
 

@Arch that will remove the underline

.header-title-logo a{
    border: unset !important;
}