Navbar disappears on resizing the window

When we resize the window to simulate the mobile device and the mobile menu appear. Then if you resize to a full screen the menu is visible and back to normal but if you click on a mobile menu to show the links and then press again to hide the links(all of this while in the mobile device screen) and then resize to a full screen the menu is not visible anymore. Can someone please help…

here’s the code:

HTML

Welcome to RK Tutorial

Hello, Everyone How are you ??

CSS

<head>
	<title>Dropdown Menu</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
*{ margin: 0; padding: 0; } body{ background: #eee; font-size: 16px; font-family: sans-serif,arial; } header{ width: 1000px; height: 120px; margin: 0 auto; position: relative; } .logo{ position: absolute; left: 20px; top: 30px; } .nav{ width: 1000px; height: 60px; margin: 0 auto; border-radius: 5px; } ul li{ list-style: none; width: 200px; line-height: 60px; position: relative; background: #222; box-shadow: 0px 2px 5px 0px grey; text-align: center; float: left; background: linear-gradient(darkred 20%,black 80%); } ul li ul{ position: absolute; } .nav > ul > li:nth-of-type(1){ border-radius: 5px 0px 0px 5px; } .nav > ul > li:nth-of-type(5){ border-radius: 0px 5px 5px 0px; } ul li a{ color: #fff; width: 200px; height: 58px; display: inline-block; text-decoration: none; } ul li a:hover{ font-weight: bold; border-bottom: 2px solid #fff; } ul li ul{ display: none; } .nav ul li:hover ul{ display: block; } .fa{ margin-right: 5px; } .fa-list.modify{ display: none; font-size: 35px; position: absolute; right: 30px; top:60px; cursor: pointer; } .container{ width: 1000px; height: 200px; margin: 0 auto; padding:20px 20px; } @media screen and (max-width: 480px){ header{ width: 100%; } .nav{ display: none; width: 100%; height: auto; } ul li{ width: 100%; float: none; } ul li a{ width: 100%; display: block; } ul li ul{ position: static; } ul li ul li a{ background: #222; } .fa-list.modify{ display: block; } .container{ width: 100%; height: auto; } body{ overflow-x:hidden; } }

When you resize the window to simulate the mobile device and the mobile menu appear. Then if you resize to a full screen the menu is visible and back to normal but if you click on a mobile menu to show the links and then press again to hide the links(all of this while in the mobile device screen) and then resize to a full screen the menu is not visible anymore. Can someone please help.

You can download the code from here:

https://drive.google.com/file/d/0B20qkdvdCs8SSUlsTGxYeUNTcG8/view

Since I’m at work I can’t get to Google drive, but when I was having trouble with my bootstrap navbar I used https://jsfiddle.net to figure it out. Code-Pen works as well https://codepen.io. Its good to have a sandbox you can get too in just about any browser.

It is better if you post a url to the actual project instead of to a zip file containing files for your project. Look into using Codepen or as @Johnny2136 suggests JSFiddle.

It will be easier for others to help you and you will get more feedback doing so.

1 Like

It is because when you first click the mobile menu, menu was false, so your if statement fades the menu in and assigns true to menu. When you click the button again (to hide it), then your else code executes, because menu was set to true from the first click. Your else block of code fades out the menu. Once it is faded out, you would need some trigger to fade it back in. You could check the screen width and when the width is a certain size again, you could fade it back in.

Hi there, sorry for creating duplicate posts. I didn’t add the download link the first one so i created another post with the code link.

I will try and do what you told…thanks for the help.

Yeah…next time i would certainly do this.

You can always edit an existing post in a thread.

I tried doing that but i wasn’t able to. So i created a new thread. Anyways next time i will be more careful.