I'm not really sure how to explain this, but essentially, my fixed navbar either doesn't scroll but the hyperlinks work, or the navbar scrolls but the hyperlinks don't work. This loop keeps happening when I try to fix it in html and css. I'd really appreciate some help on this.
This is the html of the navigation bar:
<body>
<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
<div class="container">
<! <a class="navbar-brand" href="#">insertgenericnamehere</a> -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">UX/UI</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#Portfolio">Portfolio</a></li>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a></li>
</li>
</ul>
</div>
</div>
</nav>
I swear it doesn't look that messy in the atom
This is the CSS for the navigation bar:
I know I have too many "list style types", I still need to delete the redundant ones.
ul {
list-style-type: none;
}
{
position: fixed;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
list-style-type: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #04AA6D;
}
I'm pretty new to html&css so feel free to shame me for stupid things, but I'm honestly stumped.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oh, the first thing I noticed is that each li element is followed by
But when I try in jsFiddle and add</li>twice :) Probably some autocomplete. I'm not sure what you mean by "fixed navbar doesn't scroll, but hyperlinks work"?
It works fine for me (ignore<br/>s
Edit: I know you wrote that you would delete it, but just to be sure - onlyI'm just lazy :D)https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj<ul>
requireslist-style-type: none;:) I played with it Take a look at your css, I recommend usingflex instead of float, it's safer, but that might just be my preference, hope you don't mind..navbar { position: fixed; top: 0; left: 0; width: 100%; border: 1px solid #e7e7e7; background-color: #f3f3f3; } .navbar-nav { display: flex; gap: 10px; } ul { list-style-type: none; margin: 0; } li a { display: inline-block; color: #666; text-decoration: none; padding: 14px; } li a:hover:not(.active) { background-color: #ddd; } li a.active { color: white; background-color: #04AA6D; }