Is bootstrap overiding my nav link styling when running smooth scroll javascript program? - SOLVED

1

I have added bootstrap and JavaScript CDN so I can use a smooth scroll JavaScript code.

For some reason which I cannot work out, when this smooth scrolling is active and the mouse pointer is NOT over the link then it has an underline till the scrolling completes.

Also the two nav links ‘classes’ and ‘contact’ appear blue??? This is only visible when I view the code from my github page. When I view the code hosted locally but on same browser (chrome) the links remain white??

Link to the github hosted page

Please Help…I’m totally stuck now!!! :slight_smile:

2

I’m on my phone, so can’t test my theories, but have you tried putting your personal CSS link after the bootstrap one in your HTML?

I don’t know what the bootstrap default stylings for a elements are, but since you currently load your ‘reset styling’ block in your CSS and then bootstrap, it seems like it would be Bootstrap doing the resetting.

3

Hi.

Thanks for the reply.

Yes I tried moving my own css link file before and after the bootstrap one and it didn’t change anything.

Thanks for taking the time to look at it. :slight_smile:

4

I had another try and put my CSS link file ‘after’ the bootstrap JS link file. This solved the blue link problem but not the issue of the link clicked appearing underlined during the scroll (with mouse not over the link.
50% there - thanks

5

I’ll have a more detailed look in an hour or so :slight_smile:

6

Ok, I figured it out.

I loaded the page and then opened the browser inspector tools.

Then I selected the element I wanted to examine, the About link.

In the right hand pane of the elements tab in the inspector (Chrome) it lists all of the styles affecting the element.

In the filter bar above that I typed ‘underline’, since that was the style problem, and it returned this:

a:-webkit-any-link { color: -webkit-link; text-decoration: underline; cursor: auto; }

and said it was coming from the ‘user-agent-stylesheet’, which is the base level css used by the browser to apply default styles.

I copied that into your style.css file and changed text-decoration to none, and it worked.

This fix may only work in web-kit browsers though, so you may want to test in other browsers and apply fixes with the other appropriate vendor prefixes.

I’ve never had to solve a problem like that before, so this was a fun learning experience for me :slight_smile:

7

Go to Top of the Class!!!

Thankyou for explaining in detail how you found the issue. I don’t know anything about web-kit etc so will read up on it. I will go through the method you explained to see how to hopefully solve that issue myself in e future.

I’m glad you found it an interesting challenge. I’m certain I will have many more for you if you want some!!! :wink:

Thanks again for taking the time to explain how you went through the troubleshooting process - much more helpful than just an answer (although that’s helpful too!!!).

All the best :slight_smile:

8

I have found a different way to solve the underline when scrolling issue.
In my ‘basic’ reset code I added

  • .container-nav a {
    color: #fff;
    text-decoration: none;
    }
    That solved it too :slight_smile:
1 Like