简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Fixed navbar code not so good, it caused issues with broken links, I don't know why
P粉004287665
P粉004287665 2024-04-04 09:09:20
0
1
427

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.

P粉004287665
P粉004287665

reply all(1)
P粉709307865
P粉7093078652024-04-05 00:58:51 1 floor

Oh, the first thing I noticed is that each li element is followed by </li> twice :) Probably some autocomplete. I'm not sure what you mean by "fixed navbar doesn't scroll, but hyperlinks work"?

But when I try in jsFiddle and add 


portfolio
It works fine for me (ignore

<br/>s I'm just lazy :D) https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj

Edit: I know you wrote that you would delete it, but just to be sure - only

<ul> requires list-style-type: none; :) I played with it Take a look at your css, I recommend using flex 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;
}
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！