Making a CSS Drop-down Menu Responsive

Question

I have got a CSS Drop-down menu on a website that I want to make responsive using CSS media queries, but it doesn't respond at certain breakpoints. Am using width and max-width attributes to make it respond but it fails. Please Assist?

HTML

.navbar{
  width:100%;
  max-width:1000px;
  text-align:center;
  margin-top:-8px;
  margin-bottom:23px;
  margin-left:160px;
}
.menu ul{
/*Removes bullets*/
  list-style:none;
}
.menu ul .active{
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red 20%, green); /* Standard syntax */
  background: linear-gradient(red 20%, green); /* Standard syntax */
}
/*Styles each list within ul*/
.menu ul li{
  background-color:green;
  border:1px solid #ffffff;
  width:100%;
  max-width:173px;
  height:35px;
  line-height:35px;
  margin:auto;
  text-align:center;
  /*Makes the list dispaly in a horizontal maneer*/
  float:left;
  position:relative;
  border-radius:8px;
  font: 15px;
  font-weight:regular;
}
.menu ul li a{
  text-decoration:none;
  color:white;
  display:block;
}
.menu ul li a:hover{
  background-color:red;
  border-radius:8px;
}
.menu ul ul{
  position:absolute;
  margin-left:-40px;
  display:none;
}
.menu ul li:hover >ul{
  display:block;
}
.menu ul ul ul{
  width:100%;
  margin-left:134px;
  top:0px;
} 
@media only screen and (min-width: 1023px)  and (max-width: 1223px) {
  .navbar{ 	
    width:98%; 	
    max-width:1000px; 
  }
  .menu ul li{ 	
    width:98%; 	
    max-width:173px; 	
    height:35px; 	
    line-height:35px; 	
    margin:auto; 
  }
  .menu ul ul ul{ 	
    width:98%; 	
    margin-left:134px; 	
    top:0px;
  }
}

<div class="navbar">
  <div class="menu">
    <ul>
      <li class="active">  Home </li>
      <li> <a href="art.html"> Arts & Social Sciences <span class="arrow">&#9660; </span> </a>
        <ul>
          <li> <a href="#"> Sociology</a></li>
          <li> <a href="#"> Anthropology </a></li>
          <li> <a href="#"> Linguistics </a></li>
          <li> <a href="#"> Political Science <span class="arrow">  &rang;</span></a>
            <ul>
            <li><a href="#"> World Civilization </a></li>
            <li><a href="#"> Politics of Development </a></li>
            <li><a href="#"> Comparative Politics</a></li>
            <li><a href="#"> Globalization </a></li>
            </ul> 
          </li> 
        </ul>
      </li>
      <li> <a href="business.html"> Business & Economics <span class="arrow">&#9660; </span> </a>
        <ul>
          <li> <a href="#"> Business Management</a></li>
          <li> <a href="#"> Purchasing and Supplies </a></li>
          <li> <a href="#"> Economics </a>
            <ul>
              <li><a href="#"> Micro Economics </a></li>
              <li><a href="#">  Inflation </a></li>
              <li><a href="#"> Stock Excahange </a></li>
              <li><a href="#"> Supply Chain </a></li>
              <li><a href="#"> Macro-Economics </a></li>
            </ul> 
          </li> 
        </ul>
      </li>
      <li> <a href="edu.html"> Education<span class="arrow">&#9660; </span> </a>
        <ul>
          <li> <a href="#"> Education(Arts)</a></li>
          <li> <a href="#"> Early Childhood </a></li>
          <li> <a href="#"> Education(Scienmce)</a></li>
          <li> <a href="#"> Education & Technology</a>
            <ul>
              <li><a href=""> Marketing </a></li>
              <li><a href=""> Supply Chain </a></li>
            </ul> 
          </li> 
        </ul>
      </li>
      <li><a href="contact.php"> Contact Us</a></li>
    </ul>
  </div>
</div>

did you add your meta tag? <meta name="viewport" content="width=device-width, initial-scale=1"> — Wisely D Cruizer
– Wisely D Cruizer, Commented Apr 3, 2017 at 9:03
use bootstrap framework batter for responsive like this getbootstrap.com/examples/navbar-fixed-top — lalit bhakuni
– lalit bhakuni, Commented Apr 3, 2017 at 9:07
@Wisely, Yah, I added the meta tag viewport but still not responsive, the media query is below the CSS code, just scroll down. — Martin
– Martin, Commented Apr 3, 2017 at 9:11

Ramesh S · Accepted Answer · 2017-04-03 09:19:49Z

<!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">
<title>Example </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <nav id="myNavbar" class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Menu</a></li>
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Sub-Menu</a></li>
                            <li><a href="#">Sub-Menu</a></li>
                            <li><a href="#">Sub-Menu</a></li>
                            <li><a href="#">Sub-Menu</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
</div>
</body>
</html>

Momin · Accepted Answer · 2017-04-03 09:45:43Z

(function($) {
  $.fn.menumaker = function(options) {
    var cssmenu = $(this),
      settings = $.extend({
        format: "dropdown",
        sticky: false
      }, options);
    return this.each(function() {
      $(this).find(".button").on('click', function() {
        $(this).toggleClass('menu-opened');
        var mainmenu = $(this).next('ul');
        if (mainmenu.hasClass('open')) {
          mainmenu.slideToggle().removeClass('open');
        } else {
          mainmenu.slideToggle().addClass('open');
          if (settings.format === "dropdown") {
            mainmenu.find('ul').show();
          }
        }
      });
      cssmenu.find('li ul').parent().addClass('has-sub');
      multiTg = function() {
        cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
        cssmenu.find('.submenu-button').on('click', function() {
          $(this).toggleClass('submenu-opened');
          if ($(this).siblings('ul').hasClass('open')) {
            $(this).siblings('ul').removeClass('open').slideToggle();
          } else {
            $(this).siblings('ul').addClass('open').slideToggle();
          }
        });
      };
      if (settings.format === 'multitoggle') multiTg();
      else cssmenu.addClass('dropdown');
      if (settings.sticky === true) cssmenu.css('position', 'fixed');
      resizeFix = function() {
        var mediasize = 700;
        if ($(window).width() > mediasize) {
          cssmenu.find('ul').show();
        }
        if ($(window).width() <= mediasize) {
          cssmenu.find('ul').hide().removeClass('open');
        }
      };
      resizeFix();
      return $(window).on('resize', resizeFix);
    });
  };
})(jQuery);

(function($) {
  $(document).ready(function() {
    $("#cssmenu").menumaker({
      format: "multitoggle"
    });
  });
})(jQuery);

* {
  margin: 0;
  padding: 0;
  text-decoration: none
}

body {
  background: #555;
}

header {
  position: relative;
  width: 100%;
  background: #333;
}

.logo {
  position: relative;
  z-index: 123;
  padding: 10px;
  font: 18px verdana;
  color: #6DDB07;
  float: left;
  width: 15%
}

.logo a {
  color: #6DDB07;
}

nav {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

#cssmenu:after,
#cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0
}

#cssmenu #head-mobile {
  display: none
}

#cssmenu {
  font-family: sans-serif;
  background: #333
}

#cssmenu>ul>li {
  float: left
}

#cssmenu>ul>li>a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #ddd;
  font-weight: 700;
}

#cssmenu>ul>li:hover>a,
#cssmenu ul li.active a {
  color: #fff
}

#cssmenu>ul>li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
  background: #448D00!important;
  -webkit-transition: background .3s ease;
  -ms-transition: background .3s ease;
  transition: background .3s ease;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 30px
}

#cssmenu>ul>li.has-sub>a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #ddd;
  content: ''
}

#cssmenu>ul>li.has-sub>a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #ddd;
  content: '';
  -webkit-transition: all .25s ease;
  -ms-transition: all .25s ease;
  transition: all .25s ease
}

#cssmenu>ul>li.has-sub:hover>a:before {
  top: 23px;
  height: 0
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -ms-transition: all .25s ease;
  background: #333;
  transition: all .25s ease
}

#cssmenu ul ul li:hover {}

#cssmenu li:hover>ul {
  left: auto
}

#cssmenu li:hover>ul>li {
  height: 35px
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0
}

#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #ddd;
  font-weight: 400;
}

#cssmenu ul ul li:last-child>a,
#cssmenu ul ul li.last-item>a {
  border-bottom: 0
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #fff
}

#cssmenu ul ul li.has-sub>a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #ddd;
  content: ''
}

#cssmenu ul ul li.has-sub>a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #ddd;
  content: '';
  -webkit-transition: all .25s ease;
  -ms-transition: all .25s ease;
  transition: all .25s ease
}

#cssmenu ul ul>li.has-sub:hover>a:before {
  top: 17px;
  height: 0
}

#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
  background: #363636;
}

#cssmenu ul ul ul li.active a {
  border-left: 1px solid #333
}

#cssmenu>ul>li.has-sub>ul>li.active>a,
#cssmenu>ul ul>li.has-sub>ul>li.active>a {
  border-top: 1px solid #333
}

@media screen and (max-width:700px) {
  .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    text-align: center;
    padding: 10px 0 0 0;
    float: none
  }
  .logo2 {
    display: none
  }
  nav {
    width: 100%;
  }
  #cssmenu {
    width: 100%
  }
  #cssmenu ul {
    width: 100%;
    display: none
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid #444
  }
  #cssmenu ul li:hover {
    background: #363636;
  }
  #cssmenu ul ul li,
  #cssmenu li:hover>ul>li {
    height: auto
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0
  }
  #cssmenu>ul>li {
    float: none
  }
  #cssmenu ul ul li a {
    padding-left: 25px
  }
  #cssmenu ul ul li {
    background: #333!important;
  }
  #cssmenu ul ul li:hover {
    background: #363636!important
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px
  }
  #cssmenu ul ul li a {
    color: #ddd;
    background: none
  }
  #cssmenu ul ul li:hover>a,
  #cssmenu ul ul li.active>a {
    color: #fff
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left
  }
  #cssmenu>ul>li.has-sub>a:after,
  #cssmenu>ul>li.has-sub>a:before,
  #cssmenu ul ul>li.has-sub>a:after,
  #cssmenu ul ul>li.has-sub>a:before {
    display: none
  }
  #cssmenu #head-mobile {
    display: block;
    padding: 23px;
    color: #ddd;
    font-size: 12px;
    font-weight: 700
  }
  .button {
    width: 55px;
    height: 46px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 12399994;
  }
  .button:after {
    position: absolute;
    top: 22px;
    right: 20px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: ''
  }
  .button:before {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    top: 16px;
    right: 20px;
    display: block;
    height: 2px;
    width: 20px;
    background: #ddd;
    content: ''
  }
  .button.menu-opened:after {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    top: 23px;
    border: 0;
    height: 2px;
    width: 19px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
  }
  .button.menu-opened:before {
    top: 23px;
    background: #fff;
    width: 19px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid #444;
    height: 46px;
    width: 46px;
    cursor: pointer
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #fff
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: ''
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none
  }
  #cssmenu ul ul ul li.active a {
    border-left: none
  }
  #cssmenu>ul>li.has-sub>ul>li.active>a,
  #cssmenu>ul ul>li.has-sub>ul>li.active>a {
    border-top: none
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav id='cssmenu'>
    <div class="logo"><a href="index.html">Responsive </a></div>
    <div id="head-mobile"></div>
    <div class="button"></div>
    <ul>
      <li class='active'><a href='#'>HOME</a></li>
      <li><a href='#'>Arts And Social Science</a>
        <ul>
          <li><a href="">sociology</a></li>
          <li><a href="">Anthropology</a></li>
          <li><a href="">Linguistics</a></li>
          <li><a href="">Linguistics</a></li>
          <li><a href="">Political Science</a>
            <ul>
              <li><a href="">World Civilization </a></li>
              <li><a href="">Politics of Development</a></li>
              <li><a href="">Comparative Politics</a></li>
              <li><a href="">Globalization</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Business & Economics</a>
        <ul>
          <li> <a href="#"> Business Management</a></li>
          <li> <a href="#"> Purchasing and Supplies </a></li>
          <li> <a href="#"> Economics </a>
            <ul>
              <li><a href="#"> Micro Economics </a></li>
              <li><a href="#">  Inflation </a></li>
              <li><a href="#"> Stock Excahange </a></li>
              <li><a href="#"> Supply Chain </a></li>
              <li><a href="#"> Macro-Economics </a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Education</a>
        <ul>
          <li> <a href="#"> Education(Arts)</a></li>
          <li> <a href="#"> Early Childhood </a></li>
          <li> <a href="#"> Education(Scienmce)</a></li>
          <li> <a href="#"> Education & Technology</a>
            <ul>
              <li><a href=""> Marketing </a></li>
              <li><a href=""> Supply Chain </a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Contact Us</a>

      </li>

    </ul>
  </nav>
</header>
<section style='padding-top:20px;font:bold  44px arial;color:#68D800;'>
  CSS Menu
</section>

Sudipto · Accepted Answer · 2017-04-03 17:08:39Z

1

@media only screen and (min-width: 1023px) and (max-width: 1223px)

This will execute the code between 1023px and 1223px which is really really small.

Try using only one of them at a time like this:

 @media only screen and (min-width: 1023px)

or this:

@media only screen and (min-width: 1023px)

Or just increase the resolution gap, like this:

@media only screen and (min-width: 768px) and (max-width: 1223px)

answered Apr 3, 2017 at 17:08

Sudipto

4402 silver badges8 bronze badges

Collectives™ on Stack Overflow

Making a CSS Drop-down Menu Responsive

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related