Im using bootstrap 5.
In index.html, im inserting the nav.html via js.
The problem is, the navbar CSS doesnt work when loaded via js. But does work if i copy the nav.html code itself into index.html.
ie. the main.css colors for navbar and navbar-brand are not showing when nav.html is loaded into index, but the colors do show when the nav code is in index, and not using the js loading.
The nav.html gets copied into many pages, thats what i want, but there is no styling. why?
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/[email protected]/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;
}