HTML & CSS Navbar with Checkbox isn't working!

Hello Community, after looking for an answer for hours you are my last choice to get the Problem fixed.

I want to open my mobile nav-bar by checking the invisible Checkbox which I linked to my (hamburger menu). But I can’t reach the div with the navigation by using…

.nav-toggle:checked ~ .nav-bar {
display: block
}

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn HTML, CSS, JAVASCRIPT</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header>
        
        <div class="logo-area">
            <i class="fab fa-accusoft"></i>
            <h1>Accusoft</h1>
        </div>

        <div id="nav-toggle-container" class="nav-toggle-container">
            <input id="nav-toggle" class="nav-toggle" type="checkbox" class="nav-toggle">
        </div>

        <div class="nav-bar">
            <ul class="nav-list">
                <li class="nav-link">
                    <a href="#">Startseite</a>
                </li>
                <li class="nav-link">
                    <a href="#">Leistungen</a>
                </li>
                <li class="nav-link">
                    <a href="#">Fahrpläne</a>
                </li>
                <li class="nav-link">
                    <a href="#">Kontakt</a>
                </li>
            </ul>
        </div>

        <label class="nav-btn" for="nav-toggle"> <div class="nav-btn-container"><span></span></div></label>

    </header>

    <main>

    </main>

    <footer>

    </footer>
</body>
</html>

And here is the CSS:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
    font-family: 'Open Sans', sans-serif;
    
}

body{
    padding: 0;
    margin: 0;
}

header{

    position: fixed;
    display: flex;
    justify-content: space-between;

    width: 100vw;
    height: 60px;

    background-color: #f4f4f4;
}

/*Logobereich*/

.logo-area{
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.logo-area i{
    color: #25d2df;
    font-size: 1.5em;
}

.logo-area h1{
    font-size: 1.5em;
    padding-left: 10px;
}

/*Checkboxbereich*/

.nav-toggle-container{
    display: none;
    align-items: center;
    justify-content: center;

    background-color: red;
    width: 60px;
    height: 100%;
   
}



.nav-btn-container{
    cursor: pointer;

    display: none;
    align-items: center;
    justify-content: center;

    background-color: #fff;
    height: 100%;
    width: 60px;
}

.nav-btn span, .nav-btn span::before, .nav-btn span::after{
    cursor: pointer;

    height: 2px;
    width: 20px;
    background-color: #000;

    position: relative;
    display: inline-block; 
}

.nav-btn span::before, .nav-btn span::after{
    content: '';

}

.nav-btn span::before{
    position: absolute;
    top: 5px;
}

.nav-btn span::after{
    position: absolute;
    bottom: 5px;
}

/*Navigation*/

.nav-list{
    display: flex;
    align-items: center;
    padding-right: 30px;
    position: absolute;
    right: 0;
}

.nav-link{
    list-style: none;
    
}

.nav-link a{
    padding-right: 20px;
    text-decoration: none;

    font-size: 1.1em;
    color: #000;
}

.nav-link a:visited{
    color: #000;
}

.nav-link a:hover{
    color: #25d2df;
}

/* ----- Mobile Ansicht ----- */

@media only screen and (max-width: 750px){

.nav-btn-container{
    display: flex;
    position: absolute;
    right: 0;
}

header{
    position: fixed;
}

.nav-bar{
    display: none;
}

.nav-list{
   display: block;
   position: absolute;

   left: 0;
   top: 100%;
   margin: 0;

   width: 100vw;
   height: 100vh;

   text-align: left;
   background-color: #fff;
}

.nav-link{
    padding-top: 10vh;

}

.nav-link a{
    font-size: 1.5em;
}

/*Animation bei Click*/

#nav-toggle:checked ~ .nav-bar{
    display: block;
}

}

Thank you!

Hi Philipp,

.nav-toggle isn’t a sibling of .nav-bar.
.nav-toggle-container is a sibling of .nav-bar.
Therefore with the general siblings combinator you cannot target .nav-bar.
Either you find a way to get rid of the wrapping .nav-toggle-container or you add some Javascript.
You also have a syntax error in your input tag: The ‘class’ attribute is there twice.

1 Like

Thank you! Problem solved. :heart_eyes:

1 Like