I recently created a navigation bar for a website with 6 buttons that change appearance when the current route is active. However, I encountered an issue where clicking on the top button caused the CSS styling of the following buttons to not work as expected. This problem only occurs with the very top button and when I remove it, the issue persists with the next button in line. The other 5 buttons function correctly.
Below is the code for the navigation bar:
.container {
float: right;
background-color: rgb(199, 199, 199);
}
.btn-nav {
display: inline-block;
background: transparent;
border: 1px solid black;
height: 60px;
width: 60px;
margin: 11px;
border-radius: 15px;
cursor: pointer;
}
.active-link {
display: inline-block;
background: white;
border: 1px solid black;
/*padding: 5px 5px;*/
height: 60px;
width: 60px;
margin: 11px;
border-radius: 15px;
}
.img {
height: 45px;
width: 45px;
margin-top: 5px;
}<div class="container">
<button routerLink="/filtering"
routerLinkActive="active-link"
#link="routerLinkActive"
class="btn-nav"
style="align-content: center;"
[class.btn-nav]="!link.isActive"><img src="/assets/icons/1.png" alt="filtering operation Icon" class="img"></button>
<br>
<button routerLink="/cleaning"
routerLinkActive="active-link"
#link="routerLinkActive"
class="btn-nav"
style="align-content: center;"
[class.btn-nav]="!link.isActive"><img src="/assets/icons/2.png" alt="cleaning Icon" class="img"></button>
<br>
<button routerLink="/hood"
routerLinkActive="active-link"
#link="routerLinkActive"
class="btn-nav"
style="align-content: center;"
[class.btn-nav]="!link.isActive"><img src="/assets/icons/3.png" alt="Hood Icon" class="img"></button>
<br>
<button routerLink="/?"
routerLinkActive="active-link"
#link="routerLinkActive"
class="btn-nav"
style="align-content: center;"
[class.btn-nav]="!link.isActive"><img src="/assets/icons/4.png" alt="archive Icon" class="img"></button>
<br>
<button routerLink="/?"
routerLinkActive="active-link"
#link="routerLinkActive"
class="btn-nav"
style="align-content: center;"
[class.btn-nav]="!link.isActive"><img src="/assets/icons/5.png" alt="Menu Icon" class="img"></button>
<br>
<button routerLink="/home"
routerLinkActive="active-link"
#link="routerLinkActive"
class="btn-nav"
[class.btn-nav]="!link.isActive">home</button>
<br>
</div>