Jure Štabuc Jure Štabuc - 2 months ago 7
CSS Question

Responsive navbar - checkbox does not trigger (html, css)

I want to make a responsive navbar and I used the checkbox input to dropdown the menu when viewing on smaller devices. Despite that the page is showing up correctly, the checkbox does not trigger the drop down menu. I'm still a beginner so maybe I made an obvious mistake but I really do not see a solution here.

Thanks for your help!

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show menu</label>
<input type="checkbox" id="show-menu" role="button">
<nav>
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="world.html">Food around the globe</a></li>
<li><a href="where.html">Where to eat?</a></li>
<li><a href="recipes.html">Recipes</a></li>
<li><a href="about.html">About me</a></li>
</ul>
</nav>
</body>
</html>




CSS

body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
margin-left: 150px;
margin-right: 150px;
margin-top: 150px;
}
h2 {
margin-left: 150px;
margin-right: 150px;
}
p {
text-align: justify;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}

img.center {
display: block;
margin: auto;
}

ul.recipe{
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
}

nav ul {
/* removing bullets, margins and padding for navigation bar */
list-style-type: none;
margin: 0;
padding: 0;
/*background color of navigaton bar */
overflow: hidden;
background-color: #333333;
/* fixed top, also when user scrolls the page */
position: fixed;
top: 0;
width: 100%;
}
nav li {
float: left;
}
nav li a {
/* formatting links in the navigation bar*/
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
}

nav li a:hover:not(.active) {
/*changing the link color on non active links on hover*/
background-color: black;
}
.active {
/*showing to user which link is active*/
background-color: #6600cc;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
margin: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}

/*Hide checkbox*/
input[type=checkbox]{
/*display: none;*/
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}


/*Responsive Styles*/

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

body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
p {
text-align: justify;
margin-top: 100px;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}
/*Make dropdown links appear inline*/

nav ul {
position: fixed;
display: none;
margin-top: 37px;
}
/*Create vertical spacing*/
nav li {
margin-bottom: 1px;
width: 100%;
margin: 0;
}
/*Make all menu links full width*/
nav ul li, nav li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}

Answer

You hiding the ul. You should display it when the checkbox is :checked.

#show-menu:checked + nav ul {
  display: block;
}

Working code:

body {
  margin: 0;
  /*if the user does not have helvetica installed, the browser will use next font in the row*/
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}
h1 {
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 150px;
}

h2 {
  margin-left: 150px;
  margin-right: 150px;
}


p {
  text-align: justify;
  margin-left: 150px;
  margin-right: 150px;
  line-height: 150%;
  float: right;
}

img.center {
  display: block;
  margin: auto;
}

ul.recipe{
  margin-left: 150px;
  margin-right: 150px;
  line-height: 150%;
}

nav ul {
  /* removing bullets, margins and padding for navigation bar */
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*background color of navigaton bar */
  overflow: hidden;
  background-color: #333333;
  /* fixed top, also when user scrolls the page */
  position: fixed;
  top: 0;
  width: 100%;
}

nav li {
  float: left;
}

nav li a {
  /* formatting links in the navigation bar*/
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

nav li a:hover:not(.active) {
  /*changing the link color on non active links on hover*/
  background-color: black;
}
.active {
  /*showing to user which link is active*/
  background-color: #6600cc;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
  margin: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

/*Hide checkbox*/
input[type=checkbox]{
  /*display: none;*/
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
  display: block;
}


/*Responsive Styles*/

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

  body {
    margin: 0;
    /*if the user does not have helvetica installed, the browser will use next font in the row*/
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
  }
  p {
    text-align: justify;
    margin-top: 100px;
    margin-left: 150px;
    margin-right: 150px;
    line-height: 150%;
    float: right;
  }
  /*Make dropdown links appear inline*/

  nav ul {
    position: fixed;
    display: none;
    margin-top: 37px;
  }

  #show-menu:checked + nav ul {
    display: block;
  }
  /*Create vertical spacing*/
  nav li {
    margin-bottom: 1px;
    width: 100%;
    margin: 0;

  }
  /*Make all menu links full width*/
  nav ul li, nav li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display:block;
  }
}
<label for="show-menu" class="show-menu">Show menu</label>
<input type="checkbox" id="show-menu" role="button">
<nav>
  <ul id="menu">
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="world.html">Food around the globe</a></li>
    <li><a href="where.html">Where to eat?</a></li>
    <li><a href="recipes.html">Recipes</a></li>
    <li><a href="about.html">About me</a></li>
  </ul>
</nav>

http://output.jsbin.com/cosuxa