I am currently utilizing Bootstrap to design a modal within a Navbar. When the Login or Signup buttons are clicked, the modal is displayed. The Navbar has a transparent color by default, changing to white upon hovering over it. I wish for the modal to also be transparent, but it appears white due to being relative to the Navbar's color. For example, if my background is red, the modal will appear white instead of red, and I want it to blend in with the red color scheme.
Below is the code for my modal:
<!--Login-->
<li class="nav-item">
<div class="col-md-auto col-sm-auto col-auto" style="margin: 1vw;">
<!-- Button trigger modal -->
<button type="button" class="btn btn1" data-bs-toggle="modal" data-bs-target="#LoginModal">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="LoginModal" tabindex="-1" aria-labelledby="LoginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-dark bg1">
<h5 class="modal-title" id="LoginModalLabel">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-dark bg1">
<!--Form-->
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email
address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email
with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me
out</label>
</div>
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
</form>
</div>
<div class="modal-footer text-dark bg1">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</li>
And here is the CSS styling I have applied:
.navbar{
background-color: transparent;
}
.navbar:hover{
background-color: white;
}
.btn1:hover{
color: blueviolet;
}
.bg1{
background-color: transparent;
}
body{
background-color: tomato;
}