After experimenting with a few different options such as setting the background-color to transparent, rgba(0,0,0,0), and background: none; I found that when I used background-color: red or any other color, the color changed as expected.
Below is the HTML code I used:
`<div class="navbar navbar-expand-md">
<h1 class="navbar-brand">sivarajbiz</h1>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a> </li>
<li class="nav-item"><a href="#" class="nav-link">What you want</a> </li>
<li class="nav-item"><a href="#" class="nav-link">What I know</a></li>
<li class="nav-item"><a href="#" class="nav-link">Let's chat</a> </li>
</ul>
</div>`
Here is my CSS code:
:root{
--primary-theme-color: #0077B5 /*LinkedInBlue*/;
--buttons-color: #0077B5 /*LinkedInBlue*/;
--primary-bg-color: black;
--primary-font-color: white;
--img-text-bg-color: rgb(0,0,0,0.2);
--img-text-font-size-mobile: 0.8em;
--img-text-box-width: 20em;
--img-text-box-width-mobile: 15em;
}
body{
font-family: "times new roman",serif;
color: var(--primary-font-color);
background-color: var(--primary-bg-color);
}
.carousel-inner .carousel-item {
height: 100vh;
}
.carousel-caption{
transform: translate(-5vw,-30vh);
background-color: var(--img-text-bg-color);
width: var(--img-text-box-width);
height: var(--img-text-box-width);
text-align: left;
padding-left: 2%;
}Upon inspection, you can see from the screenshot that the navbar is originally black in color. I intended to change it to appear transparent, but encountered difficulties.