Darcy Darcy - 5 months ago 65
CSS Question

CSS responsive menu

I am having problem in my responsive menu. When i click the menu navigation, all the list is show horizontal. But i want it to be vertical which means that only 1 list in 1 line. Please help me, i am new to programming



.menu ul.topnav li:not(:first-child) {

display: none;

}

.menu ul.topnav li.icon {

display: inline-block;

float: right;

}

.menu ul.topnav.responsive {

position: relative;

}

.menu ul.topnav.responsive li.icon {

position: absolute;

right: 0;

top: 0;

}

.menu ul.topnav.responsive li {

float: left;

display: block;

background-color: #0099FF;

}

.menu ul.topnav.responsive li a {

display: block;

text-align: left;

float: left;

}

.menu-wrap {

background: #1a202c;

overflow: hidden;

width: 100%;

}

.menu {

width: 70.2782%;

height: 85px;

margin-top: 80px;

background-color: #0099FF;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

}

.menu ul {

background-color: #0099FF;

}

.menu ul li {

list-style: none;

float: left;

width: auto;

margin-right: -4px;

}

.menu ul li a {

display: inline-block;

height: 85px;

line-height: 85px;

padding-left: 30px;

padding-right: 30px;

font-size: 14px;

font-family: 'Oswald', sans-serif;

color: #ffffff;

border-right: #0099FF solid 1px;

text-transform: uppercase;

}

.menu ul li a:hover {

background: #e1ece7;

color: #1a202c;

}

.menu ul li a.active {

background: #e1ece7;

color: #1a202c;

}

<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>

<div class="menu-wrap">


<div class="menu">
<ul class="topnav">
<li><a href="index.html" class="active">home</a>
</li>
<li><a href="about.html">about</a>
</li>
<li><a href="services.html">Services</a>
</li>
<li><a href="register.html">Register </a>
</li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>

</ul>




Answer

Set width of li to 100%

ul.topnav.responsive li {
    width: 100%;
}
ul.topnav.responsive{
padding-left:0;
}

Fixed Your snippet

.menu ul.topnav li:not(:first-child) {

      display: none;

    }

    .menu ul.topnav li.icon {

      display: inline-block;

      float: right;

    }

    .menu ul.topnav.responsive {

      position: relative;

    }

    .menu ul.topnav.responsive li.icon {

      position: absolute;

      right: 0;

      top: 0;

    }

    .menu ul.topnav.responsive li {

      float: left;

      display: block;

      background-color: #0099FF;

    }

    .menu ul.topnav.responsive li a {

      display: block;

      text-align: left;

      float: left;

    }

    .menu-wrap {

      background: #1a202c;

      overflow: hidden;

      width: 100%;

    }

    .menu {

      width: 70.2782%;

      height: 85px;

      margin-top: 80px;

      background-color: #0099FF;

      margin-right: auto;

      margin-bottom: 0;

      margin-left: auto;

    }

    .menu ul {

      background-color: #0099FF;

    }

    .menu ul li {

      list-style: none;

      float: left;

      width: auto;

      margin-right: -4px;

    }

    .menu ul li a {

      display: inline-block;

      height: 85px;
      line-height: 85px;

      padding-left: 30px;

      padding-right: 30px;

      font-size: 14px;

      font-family: 'Oswald', sans-serif;

      color: #ffffff;

      border-right: #0099FF solid 1px;

      text-transform: uppercase;

    }

    .menu ul li a:hover {

      background: #e1ece7;

      color: #1a202c;

    }

    .menu ul li a.active {

      background: #e1ece7;

      color: #1a202c;

    }

ul.topnav.responsive li {
    width: 100%;
    display: inline-block;
}
ul.topnav.responsive{
padding-left:0;
}
ul.topnav.responsive li.icon {
    width: auto;
}
<script>
  function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
  }
</script>

<div class="menu-wrap">


  <div class="menu">
    <ul class="topnav">
      <li><a href="index.html" class="active">home</a>
      </li>
      <li><a href="about.html">about</a>
      </li>
      <li><a href="services.html">Services</a>
      </li>
      <li><a href="register.html">Register </a>
      </li>
      <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
      </li>

    </ul>