简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Fixed navbar code not so good, it caused issues with broken links, I don't know why

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粉004287665P粉004287665180 days ago344

reply all(1)I'll reply

  • P粉709307865

    P粉7093078652024-04-05 00:58:51

    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;
}

    reply
    0
  • Cancelreply