Question 386695 in Html Question posted in
Some basic documentation can be found here.

Html – Styling isn't being applied to my navbar, unsure why

I’m a beginner making my portfolio for a freeCodeCamp assignment currently. I intend for my navbar elements to be displayed horizontally, with specfic font and styling elements, but none of these are being applied to the navbar. The rest of my CSS code works just fine, it’s only the section for the navbar that doesn’t seem to be doing anything. It remains in the generic font with the elements displayed vertically no matter what I do. What is it that I am missing? Attached is my code.

I’ve tried moving the navbar elements around the html document and within different elements, but nothing has worked so far. The navbar elements have no CSS applied to them no matter what I try.

Appreciate any guidance!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="./styles.css">
    <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=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <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=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
    rel="stylesheet"
/>
</head>
<body>
    <header>
    <nav id='navbar'>
        <ul class=""nav-links'>
            <li><a href="#welcome-section" class="nav-link">Welcome</a></li>
            <li><a href="#projects" class="nav-link">Projects</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
        </ul>
    </nav>
    </header>

*{
    margin: 0;
}

body {
    font-family: "Noto Serif", sans-serif;
    text-align: center;
    background-color: var(--neutral);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}

h1{
    font-size: 60px;
}

#navbar {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--neutral);
    padding: 20px 0;
    font-size: 20px;
    border-bottom: 1px solid var(--neutral-focus);
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links a{
    text-decoration: none;
    padding: 0 10px;
    color: var(--base-100);
}

.nav-links a:hover {
    text-decoration: underline;
}
Tags:

3

Answers


  1. 0

    you have mistake for class="nav-links", but you have used class=""nav-links’.This causing the CSS rules not to be applied to your navbar.

    Login or Signup to reply.
  2. 0

    Are you sure that your snippet is right? I can see typos like <ul class=""nav-links'>; it should be <ul class="nav-links">

    Login or Signup to reply.
  3. 0

    In the HTML part:
    The class name should be in double quotes like this:
    class="nav-links" Here is the correct code:

     <nav id='navbar'>
    <ul class="nav-links">
        <li><a href="#welcome-section" class="nav-link">Welcome</a></li>
        <li><a href="#projects" class="nav-link">Projects</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
    </ul>
</nav>

    You have it like this: class=""nav-links’

    Its just a typo!

    Check this screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search