CODEWITHSUNDEEP
jquerycssresponsive-design
MSH Developer
MSH Developer

Reputation: 75

Menu get hides when I toggle it in responsive mode

I have a responsive menu that in responsive mode you can toggle it with a button in jquery. The problem is when I make screen small and toggle menu (open and close it) when I return to desktop mode menu still stay hidden and this time there is no button to toggle it because it is in desktop mode and there is nothing to toggle it. only when you refresh the page menu will back.

I tried this:

@media screen and (min-width:873px) {
    #navbar{
        visibility: visible;
        display: block;
    }
}

And this:

@media screen and (max-width:873px) {
    #navbar{
        visibility: visible;
        display: block;
    }
}

and none of them works. How can I solve this problem? With css or jquery maybe?

my jquery code for toggle menu:

$(document).ready(function(){
    $(".navbar-toggle").click(function(){
        $("#navbar").toggle(500);
    });
});


@import url(http://fonts.googleapis.com/css?family=PT+Sans);
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'PT Sans', Arial, Verdana;
  background-color: #eee;
}
h1 {
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  margin: auto;
  position: relative;
  background-color: #2c3e50;
  z-index: 7;
}
.menu li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.menu a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  z-index: 9;
}
a.active {
  background-color: #e74c3c;
  pointer-events: none;
}
.navbar-toggle{
	display: none;
}
@media screen and (max-width:872px) {
	.menu {
		margin-top: 0;
		height: 300px;
		display: none;
		position: relative;
	}
	.menu li {
	  float: right;
	  width: 100%;
	  height: 14%;
	  margin: 0;
	  padding: 0;
	}
	.res-menu{
		display: block;
	}
	.navbar-toggle{
		display: block;
		margin-top: 15px;
		margin-right: 15px;
	}
	.nav-logo{
		display: none;
	}
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>css3 Responsive menu effect</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	
  
</head>

<body>
<button type="button" class="navbar-toggle">
	<span class="big-font"><i class="fa fa-bars" aria-hidden="true"></i></span>
</button><div class="clearfix"></div>
<ul class="menu" id="navbar">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
	$(document).ready(function(){
		$(".navbar-toggle").click(function(){
			$("#navbar").toggle(500);
		});
	});
	</script>
</body>
</html>

Upvotes: 0

Views: 96

Answers (1)

masterpreenz
masterpreenz

Reputation: 2290

Use EnquireJS

enquire.register("screen and (max-width: 873px)", {
  match: function () {
     // do something if condition is true
  },
  unmatch: function () {
     // check if navbar was closed
     if (!$("#navbar").is(":visible"))
     {
         // then open it again
         $("#navbar").toggle(500);
     }
  },
  // make this execute on start
  deferSetup: true
})

To test snippet run on full screen and resize the browser

$(document).ready(function() {
  $(".navbar-toggle").click(function(event) {
    event.stopPropagation();
    $("#navbar").toggle(500);
  });

  enquire.register("screen and (max-width: 872px)", {
    match: function () {
      // if you want to do something when it is true
    },
    unmatch: function () {
      // check if navbar is not visible
      if (!$("#navbar").is(":visible")) {
        // then show it again
        $("#navbar").toggle(500);
      }
    },
    // make this execute on start
    deferSetup: true
  });
});
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'PT Sans', Arial, Verdana;
  background-color: #eee;
}

h1 {
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  margin: auto;
  position: relative;
  background-color: #2c3e50;
  z-index: 7;
}

.menu li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.menu a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  z-index: 9;
}

a.active {
  background-color: #e74c3c;
  pointer-events: none;
}

.navbar-toggle {
  display: none;
}

@media screen and (max-width:872px) {
  .menu {
    margin-top: 0;
    height: 300px;
    display: none;
    position: relative;
  }
  .menu li {
    float: right;
    width: 100%;
    height: 14%;
    margin: 0;
    padding: 0;
  }
  .res-menu {
    display: block;
  }
  .navbar-toggle {
    display: block;
    margin-top: 15px;
    margin-right: 15px;
  }
  .nav-logo {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>css3 Responsive menu effect</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <button type="button" class="navbar-toggle">
	<span class="big-font"><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
  <div class="clearfix"></div>
  <ul class="menu" id="navbar">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>

Hope that helps

Upvotes: 1

Related Questions