I'm having trouble customizing the navigation bar using .navbar and #navbar in CSS.
I was hoping to make changes to the Bootstrap navbar, but nothing seems to be working. I'm not sure if it's an issue with the HTML or CSS. I've included the
<link rel="stylesheet" href="Style.css">#nav-bar {
position: sticky;
top: 0;
z-index: 10;
}
.navbar {
background-image: linear-gradient(to right, #a517);
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69388958895">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358455845">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1b1213091c0a180e121018501b0f18183d4b5349534f">[email protected]</a>/css/fontawesome.min.css">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
</body>