CODEWITHSUNDEEP
htmlcss
Darcy
Darcy

Reputation: 61

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>

Upvotes: 1

Views: 661

Answers (5)

Gautam Jha
Gautam Jha

Reputation: 1473

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>

Upvotes: 1

kundan suthar
kundan suthar

Reputation: 69

please find the same example in [js fiddle][https://jsfiddle.net/yhq1pzhj/]1

<script>
    function openNav() {
        $("#mySidenav").css('width', '150px');
    }

    function closeNav() {
        $("#mySidenav").css('width', '0px');
    }

</script>
<div>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
        <a href="index.html" class="active">home</a>
        <a href="about.html">about</a>

        <a href="services.html">Services</a>

        <a href="register.html">Register </a>
    </div>

    <i class="fa fa-bars" style="font-size:32px;cursor:pointer;padding-left: 35px;padding-top: 15px;" onclick="javascript:openNav()"></i></div>

======css======

.sidenav {
    /* height: 100%; */
    width: 0;
    position: fixed;
    z-index: 1;
    /* top: 0;
    left: 0; */
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover,
.offcanvas a:focus {
    color: #f1f1f1;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

Upvotes: 0

Nehemiah
Nehemiah

Reputation: 1140

<style>
.menu ul.topnav li:not(:first-child) {
 display: none;
}
.menu ul.topnav li.icon {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
}
.menu ul.topnav.responsive {
    position: relative;
}
.menu ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    display: inline-block;
    width: auto;
}
.menu ul.topnav.responsive li {
    float: none;
    width:100%;
    display: inline-block;
    background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
    display: block;
    text-align: left;
}
.menu ul.topnav.responsive li.icon a {
    float:right;
    background: #016fb9;
}
.menu ul.topnav.responsive li.icon a:hover {
    color:#fff;
}
.menu-wrap {
    background: #1a202c;
    overflow: hidden;
    width: 100%;
}
.menu {
    width: 70.2782%;
    height: auto;
    margin-top: 80px;
    background-color: #0099FF;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
.menu ul {
    background-color: #0099FF;
    display:inline-block;
    width:100%;
    float:none;
    padding-left:0;
    position:relative;
}
.menu ul li {
    list-style: none;
    float: none;
    width: auto;
}
.menu ul li a {
    display: inline-block;
    height: auto;
    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;
}
</style>
<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>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

    .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 {
    display: block;

      background-color: #0099FF;

    }

    .menu ul.topnav.responsive li a {

      display: block;

      text-align: 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;

     
      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>

Upvotes: 0

Maneesh
Maneesh

Reputation: 408

You can try clearing each list item .menu ul li adding clear:both; but you really should pull the nav trigger out of the list of menu items so that you can limit the size of your ul more easily and negate the use of clears entirely.

Try and HTML architecture like this:

<div class="menu-wrap">
<a class="menu-trigger" href="#" onclick="">&#9776;</a>
<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>
    </ul>
</div>

Upvotes: 0

Related Questions