I am in the process of creating a very basic navigation bar. Bootstrap has been incorporated into my project, along with my custom stylesheet. I believe there is only one bootstrap class on my page. Despite adding a customized hover effect, when hovering over the links, an unintended animation occurs involving color changes and other effects.
Current hover animations can be viewed here:
I aim to maintain white text during hover without the black underline. Here is the code snippet:
HTML/EJS
<head>
<meta charset="utf-8">
<title>Madhose</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/styles.css">
<nav>
<a href="#" class="logo">Madhose</a>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Poems</a></li>
<li><a href="#recipes">Recipes</a></li>
<li><a href="/posts">Posts</a></li>
</ul>
</nav>
<body>
<div class="container-fluid">
<h1>Posts</h1>
<p><%= postText %></p>
<% posts.forEach(function(post){ %>
<h1><%= post.title.substring(0,200) %></h1>
<p><%= post.content.substring(0,200) %>...
<a href="/posts/ <%= post.title %>">Read More</a></p>
<%}); %>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.footer-padding {
padding-bottom: 60px;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}
nav {
width: 100%;
position: fixed;
z-index: 2;
display: flex;
align-items: center;
padding: 0;
margin-top: -7px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
width: 100%;
background-color: rgb(0, 120, 255);
height: auto;
display: flex;
justify-content: flex-end;
}
li a {
color: rgb(235, 222, 222);
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 19px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: flex-end;
display: block;
}
li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: rgb(235, 222, 222);
transition: width .3s;
}
li a:hover::after {
width: 100%;
transition: width .3s;
}
.logo {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 25px;
font-family: 'Oswald';
display: flex;
z-index: 3;
}
.logo:hover{
color:white;
text-decoration: none;
}
h1{
font-family: 'Oswald';
}
I strongly suspect that this issue may be caused by bootstrap, but please let me know if you think it could be something else!