Why Text decoration and navbar are not working?-CodePudding

I'm making a webpage but have problems with navbar and links. My navbar items are nor staying in navbar but just floating down. Also text-decoration:none; is not working and my links ar underlined and with a dot at front.Please help me!

CSS
.navbar {
    background: black;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar__container{
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}
.navbar__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;

} 
.navbar__item{
    height: 80px; 
}
 .navbar__links {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    text-decoration: none ;
    height: 100%;
    transition: all 0.3s ease;
}

HTML
<nav >
        <div >
            <a href="#home" id="navbar__logo"> COLOR</a>
            <div  id="mobile-menu">
              <span ></span>
              <span ></span>
              <span ></span>
            </div>
            <ul >
                <li >
                    <a href="#home"   id="hope-page">HOME</a>
                </li>
                <li >
                    <a href="#about"   id="about-page">ABOUT</a>
                </li>
                <li >
                    <a href="#services"   id="services-page">SERVICES</a>
                </li>
                <li >
                    <a href="#sign-up"   id="signup">SIGN UP</a>
                </li>
            </ul>
        </div>
    </nav>

I tried border-bottom: nonel and list-style-type:none; didnt work :(. And for navbar i tried flex-direction:row, also did'n work.

Will appreciate your help.

CodePudding user response：

just verify your class names updated one

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .navbar {
            background: black;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            position: sticky;
            top: 0;
            z-index: 999;
        }

        .navbar__container {
            display: flex;
            justify-content: space-between;
            height: 80px;
            z-index: 1;
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 50px;
        }

        ul.nabar__menu {
            display: flex;
            flex-direction: row;
            align-items: center;
            list-style: none;

        }

        .navbar__item {
            height: 80px;
        }

        a.nabvar__links {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 125px;
            text-decoration: none;
            height: 100%;
            transition: all 0.3s ease;
        }

        a#navbar__logo {
            padding-top: 21px;
        }
    </style>
</head>

<body>
    <nav >
        <div >
            <a href="#home" id="navbar__logo"> COLOR</a>
            <div  id="mobile-menu">
                <span ></span>
                <span ></span>
                <span ></span>
            </div>
            <ul >
                <li >
                    <a href="#home"  id="hope-page">HOME</a>
                </li>
                <li >
                    <a href="#about"  id="about-page">ABOUT</a>
                </li>
                <li >
                    <a href="#services"  id="services-page">SERVICES</a>
                </li>
                <li >
                    <a href="#sign-up"  id="signup">SIGN UP</a>
                </li>
            </ul>
        </div>
    </nav>
</body>

</html>

CodePudding user response：

You should check your class names and your selectors. enter image description here

CodePudding user response：

navbar__links navbar__menu these two class name in HTML is incorrectly spelled

.navbar {
  background: black;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.navbar__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

.navbar__item {
  height: 80px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  text-decoration: none;
  height: 100%;
  transition: all 0.3s ease;
}

<nav >
  <div >
    <a href="#home" id="navbar__logo"> COLOR</a>
    <div  id="mobile-menu">
      <span ></span>
      <span ></span>
      <span ></span>
    </div>
    <ul >
      <li >
        <a href="#home"  id="hope-page">HOME</a>
      </li>
      <li >
        <a href="#about"  id="about-page">ABOUT</a>
      </li>
      <li >
        <a href="#services"  id="services-page">SERVICES</a>
      </li>
      <li >
        <a href="#sign-up"  id="signup">SIGN UP</a>
      </li>
    </ul>
  </div>
</nav>