Currently utilizing bootstrap 5 for my project. I have a setup in index.html where I am loading the contents of nav.html using JavaScript. However, I am facing an issue wherein the CSS styling for the navbar is not being applied when loaded via JS. Strangely, it works perfectly fine if I directly copy the code from nav.html into index.html.
For example, the defined colors in main.css for navbar and navbar-brand do not appear when nav.html is dynamically loaded into index.html. But if the nav code resides directly in index.html without JS loading, the colors are displayed correctly.
The goal is to reuse the nav.html across multiple pages, but the styling seems to be missing. Any insights on this matter?
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<!--Navigation bar-->
<div id="nav-placeholder"></div>
<script>
$(function(){ $("#nav-placeholder").load("nav.html") });
</script>
<!--end of Navigation bar-->
</div>
</div>
</body>
</html>
nav.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">My Co.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="legal.html">Legal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
main.css
.navbar {
background-color: #ff00ff;
}
.navbar-brand {
color: #ff0000;
}