CSS is not working with my html and not displaying-CodePudding

I styled my navbar but its not showing on the html or the website. I wanted to change the font as well and add color to each section of the navbar.Here is my css and here is also my html code.

.header_area .main-menu .navbar .navbar-brand{
padding: 0 2rem 0 5rem;
}

.header_area .main-menu .navbar{
padding: 1rem 20rem;
}

.header_area .main-menu .nav-item .nav-link{
font-family: "Lato", cursive;
text-transform: uppercase;
font-weight: 500;
padding: 1.7rem;
color: black;
}

here is my html code as well

  <header >
    <div >
        <nav >
            <div >
              <a  href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
              </button>
              <div  id="navbarNav"></div>
                <div ></div>
                <ul >
                  <li >
                    <a  aria-current="page" href="#">Home</a>
                  </li>
                  <li >
                    <a  href="#">About Me</a>
                  </li>
                  <li >
                    <a  href="#">Projects</a>
                  </li>
                  <li >
                    <a  href="#">Skills</a>
                  </li>
                  <li >
                    <a  href="#">Contigency Plans</a>
                  </li>

CodePudding user response：

First your HTML code are not complete, and yes if your css is in another folder you have to link it like

<link rel="stylesheet" href="style.css" />

your html codes could be like this

So this is the complete codes

In style.css file, add your upper css

in index.html file, add the below codes

<head>
<title>My codes</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
  <header >
    <div >
        <nav >
            <div >
              <a  href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
              </button>
              <div  id="navbarNav"></div>
                <div ></div>
                <ul >
                  <li >
                    <a  aria-current="page" href="#">Home</a>
                  </li>
                  <li >
                    <a  href="#">About Me</a>
                  </li>
                  <li >
                    <a  href="#">Projects</a>
                  </li>
                  <li >
                    <a  href="#">Skills</a>
                  </li>
                  <li >
                    <a  href="#">Contigency Plans</a>
                  </li>
</ul>
</div>
</nav>
</div>
</header>
</body>
</html>

CodePudding user response：

Your code is working fine. All properties you defined are working well.

I wanted to change the font as well and add color to each section of the navbar.

First, You have to download a font from google fonts. Generally, links are blue in color but you can change them [If that's what you mean]

.header_area .main-menu .navbar .navbar-brand{
padding: 0 2rem 0 5rem;
}

.header_area .main-menu .navbar{
padding: 1rem 20rem;
}

.header_area .main-menu .nav-item .nav-link{
font-family: "Lato";
text-transform: uppercase;
font-weight: 500;
padding: 1.7rem;
color: black;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

<header >
    <div >
        <nav >
            <div >
              <a  href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
              </button>
              <div  id="navbarNav"></div>
                <div ></div>
                <ul >
                  <li >
                    <a  aria-current="page" href="#">Home</a>
                  </li>
                  <li >
                    <a  href="#" style="color:red">About Me</a>
                  </li>
                  <li >
                    <a  href="#">Projects</a>
                  </li>
                  <li >
                    <a  href="#">Skills</a>
                  </li>
                  <li >
                    <a  href="#">Contigency Plans</a>
                  </li>