Why is there a link under the navbar element? [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am just trying to remove the underline that is on the navbar sub categories (courses, about me). I think it is because there is a href, but I don't know what code to use to get rid of it. I tried using text-decoration: none but that didn't work. Also feel free to give me more suggestions on how I can make this website better!
body {
margin: 0;
}
/*Headings*/
/*Navbar*/
.navbar {
background-color: #005070;
overflow: hidden;
}
.navbar a {
font-family: 'Montserrat Alternates', sans-serif;
float: right;
color: white;
margin: 23px 20px 0px 0px;
animation: fadeIn 2s;
text-decoration: none;
}
.navtext::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
transition: width .3s;
}
.navtext:hover::after {
width: 100%;
transition: width .3s;
}
.navimg {
width: 175px;
height: auto;
margin: 5px 0px 5px 20px;
animation: fadeIn 2s;
}
.navlogin {
width: 75px;
height: auto;
float: right;
margin: 15px 20px 0px 0px;
animation: fadeIn 4s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
<div class="navbar">
<img class="navimg" src="Assets/Logo White.png">
<img class="navlogin" src="Assets/Login.png">
<a class="navtext" href="Pages/Courses/index.html">Courses</a>
<a class="navtext" href="Pages/About Me/index.html">About Me</a>
</div>
<div class="head1">
<h1>Placeholder text</h1>
</div>
<div class="head2">
<h1>Placeholder text</h1>
</div>

Answer 1

If you mean the underline on mouse over the link, try removing this code from your CSS:
.navtext::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
transition: width .3s;
}
.navtext:hover::after {
width: 100%;
transition: width .3s;
}

Answer 2

If you don't have the link in that URL then use below property to that selector
text-decoration:none;
here is the example:
<a style="text-decoration:none" href="http://google.Com">Google</a>
this is an example for your code:
.navtext {
text-decoration: none;
}
<div class="navbar">
<img class="navimg" src="Assets/Logo White.png">
<img class="navlogin" src="Assets/Login.png">
<a class="navtext" href="Pages/Courses/index.html">Courses</a>
<a class="navtext" href="Pages/About Me/index.html">About Me</a>
</div>