HTML Navbar checkbox not clickable

Question

I have a problem... I created the following navbar:

.menu {
    position: fixed;
    height: 100vh;
    width: 150px;
    background-color: #3D5021;
    z-index: 0;
    left: 0px;
}

nav {
    margin-top: 50px;
}

nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: block;
    margin: 5px 0;
    width: 60px;
    height: 60px;
}

input[type="checkbox"] {
    display: none;
}

.menuButtonIcon {
    color: #FFFFFF60;
}

.menuButtonIcon .fas {
    font-size: 25px;
}

nav ul li:hover i {
    color: #FFFFFF;
    cursor: pointer;
}

#btnDashboard:checked~.fa-tachometer-alt {
    color: #FF8A00FF;
}

#btnList:checked~.fa-list-ul {
    color: #FF8A00FF;
}

#btnHeatMap:checked~.fa-map {
    color: #FF8A00FF;
}






.container {
    position: absolute;
    width: calc(100vw - 100px);
    right: 0;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    background-color: #E1E1E1;
    min-height: 100vh;
}


.normal-content {
    margin-left: 50px;
    margin-top: 20px;
}

.full-content {
    margin: 0;
}



    
        
            
            
                
                    
                
                
            

            
                
                    
                
                
            

            
                {{checked}}

Now when I run this code, the RouterLink mappings are working perfectly, because the content gets switched to the right page, but the colors of the icons in the navbar are not changing. I printed the checked property of the heatmap button, but that value stays always false. First I thought that the entire navbar gets reloaded when the Routerlink triggers, but when I turn that off, I still don't see any color changes... How can I change the color of the selected icon in the navbar???

user_16688813 · Answer

First of all, if you want only 1 item selected at a time, then use instead of .

You are using the general sibling combinator ~ :

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

If you want to change the color of the label associated with a radio, you need to place the radio before its label.

It can be done with a single rule :

.menu input[type="radio"]:checked ~ .menuButtonIcon {
    color: #FF8A00FF;
}

When an of the menu is checked, the following .menuButtonIcon element will have the color #FF8A00FF.

.menu {
    position: fixed;
    height: 100vh;
    width: 150px;
    background-color: #3D5021;
    z-index: 0;
    left: 0px;
}

nav {
    margin-top: 50px;
}

nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: block;
    margin: 5px 0;
    width: 60px;
    height: 60px;
}

input[type="radio"] {
    display: none;
}

/* see above changed CSS
input[type="checkbox"] {
    display: none;
} */

.menuButtonIcon {
    color: #FFFFFF60;
}

.menuButtonIcon .fas {
    font-size: 25px;
}

nav ul li:hover i {
    color: #FFFFFF;
    cursor: pointer;
}

.menu input[type="radio"]:checked ~ .menuButtonIcon {
    color: #FF8A00FF;
}

/* see above changed CSS
#btnDashboard:checked~.fa-tachometer-alt {
    color: #FF8A00FF;
}

#btnList:checked~.fa-list-ul {
    color: #FF8A00FF;
}

#btnHeatMap:checked~.fa-map {
    color: #FF8A00FF;
}
*/

.container {
    position: absolute;
    width: calc(100% - 140px);
    right: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #E1E1E1;
    min-height: 100vh;
}


.normal-content {
    margin-left: 50px;
    margin-top: 20px;
}

.full-content {
    margin: 0;
}

HTML Navbar checkbox not clickable

1 Answers