Cannot change the current background-image of the navbar - css

Question

I'm currently working on a project that uses angular framework. I want to achieve a similar design like this. Like this one
So here's my code for the navbar component:
<div *ngIf="!isMobile">
<nav *ngIf="nav.visible">
<div class="d-flex justify-content-around align-items-center flex-wrap my-2">
<div class="p-2">
<img src="https://i.imgur.com/2diJpU5.png" width="50px" />
</div>
</div>
<nav class="navbar navbar-expand-md">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
</li>
<li class="nav-item">
<a routerLink="/shop" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Shop All</a>
</li>
<li class="nav-item dropdown">
<a href="#" id="dropdown" data-toggle="dropdown">
Accessories
</a>
<div class="dropdown-menu shadow-sm">
<a class="dropdown-item" routerLink="/shop/category/Necklaces">Necklaces</a>
<a class="dropdown-item" routerLink="/shop/category/Bracelets-Anklets">Bracelets and Anklets</a>
<a class="dropdown-item" routerLink="/shop/category/Earrings">Earrings</a>
<a class="dropdown-item" routerLink="/shop/category/Rings">Rings</a>
</div>
</li>
<li class="nav-item">
<a routerLink="/about-us" routerLinkActive="active">About Us</a>
</li>
</ul>
<div>
<a>
<button class="btn-2 mr-2" routerLink="/cart">
<svg xmlns="http://www.w3.org/1200/svg" width="16" height="16" fill="currentColor" class="bi bi-bag"
viewBox="0 0 16 16">
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg>
</button>
</a>
</div>
</nav>
</nav>
</div>
And the css component of the navbar:
.dropdown-menu::before {
display: block;
content: "";
width: 100%;
height: 10px;
position: absolute;
top: -10px;
left: 0;
}
.navbar {
padding: 1vh 0;
transition: 0.1s all ease-in;
border: none;
text-decoration: none;
text-align: center;
background-color: transparent;
}
.navbar a {
font-size: 13px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.75px;
margin: 0 2vw;
}
.navbar a:hover {
color: rgb(221, 221, 221);
}
.active {
color: rgb(221, 221, 221) !important;
}
.navbar-toggler {
color: #ffffff;
}
.btn-2 {
background-color: transparent;
border-color: transparent;
}
.dropdown {
position: static;
transition: 1s all ease-in-out;
}
.dropdown-menu {
transition: 1s all ease-in-out;
display: none;
text-align: center;
border: 0;
border-radius: 0;
width: 100%;
margin-top: 0;
}
.dropdown:hover>.dropdown-menu {
display: block;
padding: 25px 300px;
height: auto;
width: 100%;
position: absolute;
}
.dropdown-menu a {
color: #000;
margin: 0;
padding: 5px 0;
width: auto;
}
.dropdown-menu a:hover {
display: block;
transition: .2s all ease-in-out;
background: none;
color: #c1ae8d;
}
ul {
margin: 0 auto;
align-items: center;
list-style-type: none;
}
.subtitle {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.75px;
}
.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus {
background-color: transparent;
border-color: transparent;
}
.btn-2:hover,
.btn-2:active,
.btn-2:focus {
background-color: transparent;
border-color: transparent;
}
.btn-2 {
color: #ffffff;
}
#media (max-width: 768px) {
.navbar {
background-color: #ffffff;
}
.dropdown:hover>.dropdown-menu {
display: block;
padding: 0 0 10px 0;
text-align: center;
height: auto;
width: 100%;
position: absolute;
visibility: visible;
}
.navbar-toggler,
.btn-2 {
color: black;
}
.navbar a {
color: #c1ae8d;
}
.mobile-active {
color: #a08e6e;
}
.dropdown-menu {
text-align: center;
border-color: transparent;
}
.dropdown-menu li {
text-align: center;
}
}
Here is my current situation with the project:
I tried setting the background-color of the navbar component to transparent but it just doesn't work. How can I achieve this? Thank you!
*UPDATE - Yeah, it looks like this now after changes. It gave the navbar a separate background image instead of going in to the big section.

Answer 1

Try to add
:host { background-color: transparent; } attribute in Navbar css file.