I'm currently working on this project. I purchased the bootstrap template that I enjoyed the most but am having a hard time working with the navbar. Currently, the link in the navbar is blurring the text. The blur is supposed to be in the background, while the text is supposed to turn black and be in the forefront.

#navigation.menu-two .navbar-nav > li:nth-child(1) a:hover, a:focus {
color:black;
background-color: white;

filter: blur(20px);
}
#navigation.menu-two .navbar-nav > li:nth-child(2) a:hover, a:focus {
color:black;
background-color: #E6CDFF;
filter: blur(20px);
}
#navigation.menu-two .navbar-nav > li:nth-child(3) a:hover, a:focus {
color:black;
background-color: #D2A6FF;
filter: blur(20px);
}
#navigation.menu-two .navbar-nav > li:nth-child(4) a:hover, a:focus {
color:black;
background-color: #C58BFF;
filter: blur(20px);
}
#navigation.menu-two .navbar-nav > li:nth-child(5) a:hover, a:focus {
color:black;
background-color: #C488FF;
filter: blur(20px);
}
#navigation.menu-two .navbar-nav > li:nth-child(6) a:hover, a:focus {
color:black;
background-color: #B76AFF;
filter: blur(20px);
}
#navigation.menu-two .navbar-nav > li:nth-child(7) a:hover, a:focus {
color:black;
background-color: #AD52FF;
filter: blur(20px);
}
#navigation.menu-two .navbar-nav > li:nth-child(8) a:hover, a:focus {
color:black;
background-color: #8F17FF;
filter: blur(20px);
}

I'm pretty much trying to emulate this codepen example that is currently posted below:

https://codepen.io/zhadjah9559/pen/YzGzbxe

The codepen example above is what im trying to emulate onto my portfolio website.

Below is the project that I am currently debugging:

https://github.com/zhadjah9559/SamplePortfolio/tree/master