Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by M W
M W
3,446 Points

Issue with link color when smooth scroll in motion???

Hello everyone!

I wondered if any of you may know the reason for my navbar links turning an underlined blue when I click them. If i leave the arrow over the link they remain fine and the underlined blue only remains during the motion of the scroll - it then reverts to non-underlined white.

I have set all the link states to white/darkgray with no text decoration. They worked fine until I included bootstrap and JavaScript CDN code to enable me to run a JavaScript code which enables smooth scrolling with in-page links.

I think it must have something to do with bootstrap preset formatting but I cannot work out how to rectify it.

https://matward.github.io/yoga-option/

Thank-you in advance of this little challenge!! :)

7 Answers

Erik Nuber
Erik Nuber
20,629 Points

I think it comes down to covering your basis with text-decoration none

without an actual nav tag, you will need to target your UL list for :active, :visited and maybe :hover and make sure text-decoration is set to none.

I can see in the console you have your <a> tags set to #337ab7 a blue color as well so thats why they are turning blue.

I also notice that the dark blue color remains even after the page has been visited and reloaded and the classes and contact buttons just turn color but don't do anything. There are a list of errors in the console referring both to the script on the index page as well as the style.css not loading. In your file structure css is in two different locations so it could be you have it correct in one file but need to point to the right file.

M W
M W
3,446 Points

that must be something to do with bootstrap presets then. I've not coded any <a> tags to blue. hmmmmmmm :)

M W
M W
3,446 Points
M W
M W
3,446 Points

The ul is contained within in a div class 'nav'.

Have managed to get rid of the color change now but still having the same problem with underline on links during the scrolling motion when clicked!

The code I am altering in attempt to sort out problem is CSS lines 92 to 188.

Thanks again.

Erik Nuber
Erik Nuber
20,629 Points

There is a .css issue if you look in the console, there are two css files with the same name, one within a css folder and one on same level as index.html. So you might be pointing to wrong file too.

M W
M W
3,446 Points
M W
M W
3,446 Points

link to github css code https://github.com/MatWard/yoga-option/blob/gh-pages/css/style.css

Erik Nuber
Erik Nuber
20,629 Points

in your file, under .nav it does say color: blue;

only other thing I see

I would add 

.container-nav a:active {
    color: #fff;  //whatever color you want here for when the area is chosen
    text-decoration: none;
}
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Ok, I will take a look. I right clicked on the word and inspected the element. the third thing down says

a {
    color: #337ab7;
    text-decoration: none;
}

I will look at your files...

M W
M W
3,446 Points
M W
M W
3,446 Points

I'm new with the console view so I'll need to do some digging to find the extra css file listed in console. But I do know that in inde.html there is a link to my style.css file and also the bootstrap cdn links to its own stylesheet. Is that what you meant?

I thought my style sheet would overide the bootstrap one if I specified the link behaviour. So I've been trying to work out why that one link styling issue is still coming from the bootstrap css. :(

M W
M W
3,446 Points

You were right - I had the rel link to my style.css repeated twice on my index.html file. Maybe that's what was showing up when you insected it. Deleted that now. thanks.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I don't know anything about bootstrap so hopefully someone else can help you with that. Please see my note above as there is blue set to your nav in your css file you linked on this page. Line 78.

Also, I would suggest adding in :active as a state.

if you change :active to also text-decoration:none I think it will fix your issue because it says it stays when it's been clicked.

M W
M W
3,446 Points
M W
M W
3,446 Points

Yes you were absolutely correct ref: blue color on line 78. Removed that now - thanks - I have no idea why I would have put that there!! I'll try :active and see if that works.

Thanks for looking :)