CODEWITHSUNDEEP
htmlcsscss-grid
user10027679
user10027679

Reputation:

How do I collapse a CSS grid row when a checkbox is checked?

When the checkbox is checked the nav panel should appear, and unchecked, it should be hidden. The problem is that I setup my titlebars with CSS Grid layout, so I don't know how to make the bottom row disappear.

The only thing I know is that there is a :checked pseudo selector for checkboxes and radio buttons, etc.. I just need to make the second row disappear when that checkbox is checked.

     @import url('https://fonts.googleapis.com/css?family=Rubik:900|Rajdhani|Quicksand');
    
    /* Global */
    
    html > * {
    	font-family: Quicksand;
    }
    
    body {
    	margin: 0;
    	padding: 0;
    }
    
    header {
    	background: #414a4c;
    }
    
    /* ID's */
    #navbar {
    	list-style-type: none;
    }
    
    #navbar li {
    	display: inline;
    	padding-left: 35px;
    }
    
    #navbar a {
    	text-decoration: none;
    	color: white;
    
    }
    
    #navbar-toggle:checked {
    
    }
    
    /* Classes */
    
    .title-grid {
    	display: grid;
    	grid-template-columns: 2fr 1fr 1fr 1fr;
    	grid-template-rows: 1fr 1fr;
    	grid-template-areas: 
    		"text . . clock"
    		"nav nav . .";
    	width: 100%;
    	grid-row-gap: 5vh;
    }
    
    .title-grid #navbar-toggle,
    .title-grid label {
    	grid-area: text;
    	left: 0;
    	margin-left: 25px;
    	
    }
    
    .title-grid #titletext {
    	grid-area: text;
    	position: absolute;
    	left: 150px;
    }
    
    .title-grid nav {
    	grid-area: nav;
    }
    
    .title-grid #clock {
    	grid-area: clock;
    	font-family: Rajdhani, Arial, Helvetica, sans-serif;
    	font-size: 30px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	margin-top: 10px;
    	margin-right: 10px;
    }
    
    /* Keyframes */
        <header>
    
            <div class="title-grid">
                <span id="clock"></span>
                <input type="checkbox" name="navbar-toggle" id="navbar-toggle">
                <label for="navbar-toggle">
                    <i>
                        <img src="resources/img/menu-toggle.svg" height="35px" width="35px" alt="Menu Toggle">
                    </i>
                </label>
                <div id="titletext">
                    <h1>
                        50-0 Protocol &copy;
                    </h1>
                </div>
                <nav>
                    <ul id="navbar">
                        <li><a href="Index.html" class="active">Students</a></li>
                        <li><a href="">Teachers</a></li>
                    </ul>
                </nav>
            </div>
        </header>

Upvotes: 1

Views: 741

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add these styles

#navbar-toggle~nav {
  display: none;
}

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


@import url('https://fonts.googleapis.com/css?family=Rubik:900|Rajdhani|Quicksand');

/* Global */

html>* {
  font-family: Quicksand;
}

body {
  margin: 0;
  padding: 0;
}

header {
  background: #414a4c;
}


/* ID's */

#navbar {
  list-style-type: none;
}

#navbar li {
  display: inline;
  padding-left: 35px;
}

#navbar a {
  text-decoration: none;
  color: white;
}

#navbar-toggle~nav {
  display: none;
}

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


/* Classes */

.title-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "text . . clock" "nav nav . .";
  width: 100%;
  grid-row-gap: 5vh;
}

.title-grid #navbar-toggle,
.title-grid label {
  grid-area: text;
  left: 0;
  margin-left: 25px;
}

.title-grid #titletext {
  grid-area: text;
  position: absolute;
  left: 150px;
}

.title-grid nav {
  grid-area: nav;
}

.title-grid #clock {
  grid-area: clock;
  font-family: Rajdhani, Arial, Helvetica, sans-serif;
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 10px;
  margin-right: 10px;
}


/* Keyframes */
<!DOCTYPE html>
<link rel="stylesheet" href="resources/css/main.css">
<script src="resources/js/script.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>50-0 Protocol </title>
</head>

<body>
  <header>

    <div class="title-grid">
      <span id="clock"></span>
      <input type="checkbox" name="navbar-toggle" id="navbar-toggle">
      <label for="navbar-toggle">
                <i>
                    <img src="resources/img/menu-toggle.svg" height="35px" width="35px" alt="Menu Toggle">
                </i>
            </label>
      <div id="titletext">
        <h1>
          50-0 Protocol &copy;
        </h1>
      </div>
      <nav>
        <ul id="navbar">
          <li><a href="Index.html" class="active">Students</a></li>
          <li><a href="">Teachers</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

</html>

Upvotes: 2

Related Questions