I want to hide a Navbar when link is clicked. Help!

Hey, I want to hide my navbar (ul) when links in the navbar are clicked.
Here’s the code.

CSS:
.navbar {
        background: none;
        box-shadow: none;
    }

    ul {
        position: fixed;
        height: 100vh;
        width: 100%;
        background-color: #00d2ff;
        left: 0;
        transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        z-index: 1;
    }

    li {
        position: relative;
        float: none;
        display: flex;
        justify-content: center;
        top: 20%;
        line-height: 80px;
        transition: 0.2s ease-out;
    }

    .first {
        display: block;
        position: fixed;
        right: 0%;
        top: 2%;
        cursor: pointer;
        z-index: 9;
    }
HTML:
<div class="navbar"> 
        <input type="checkbox" id="click">
        <label for="click">
            <li class="first"><i class="fa fa-bars"></i></li>
        </label>   
        <ul>
            <li><a href="#Home" class="test">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Planes">Planes</a></li>
            <li><a href="#Import">Import</a></li>
            <li><a href="#Statistics">Statistics</a></li>
        </ul>
        <div id="top"><h1 >Home</h1></div>
    </div>
    <div id="container">
        <section id="Home">
            <h1 data-aos="fade-right" data-aos-duration="900">Home</h1>
        </section>
        <section id="About"><h1 data-aos="fade-right" data-aos-duration="900">About</h1></section>
        <section id="Planes"><h1 data-aos="fade-right" data-aos-duration="900">Planes</h1></section>
        <section id="Import"><h1 data-aos="fade-right" data-aos-duration="900">Import</h1></section>
        <section id="Statistics"><h1 data-aos="fade-right" data-aos-duration="900">Statistics</h1></section>
    </div>

Hi gururajankappa

I am not sure of a way to do this using plain HTML and CSS, maybe bootstrap. Maybe the easiest way you can probably achieve this is by using jquery. Something like:

$('#overlay-menu ul li a').click(function(){
   $(this).closest('.overlay').hide();
   $(this).closest('.overlay-menu').hide();
});

There is also a link with some useful info on how to hide a dropdown menu at Show / Hide Navigation | HTML Dog
It has two examples one using the target element:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Show / hide navigation (target)</title>
	<style>
		body {
			background: #333;
			color: #000;
			margin: 0;
			font: 300 18px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
	
		#container {
			width: 240px;
			position: relative;
			background: #fff;
			margin: 0 auto;
			padding: 40px;
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}
	
		#main_nav {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			width: 100%;
			
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}

		#main_nav:target {
			display: block;
		}

		.access_aid {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 0;
			padding-top: 40px;
			overflow: hidden;
			border: 1px solid #ccc;
			background: white 10px 10px / 20px 20px no-repeat;
		}

		#access_nav {
			background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
			background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
		}

		#access_top {
			background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
		}
	</style>
</head>
<body id="body">
	<div id="container">
		<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
		<article>
			<h1>Show / Hide Navigation (target)</h1>
			<p>An example of a simple technique to show and hide navigation, manipulating the <code>:target</code> pseudo class. Particularly useful when designing for mobile.</p>
			<p>This also uses CSS gradients to produce the "show" and "hide" button icons instead of images.</p>
			<p>Spiffing.</p>
			<p>See <a href="http://www.htmldog.com/techniques/showhide/">the related HTML Dog Techniques article</a> for more.</p>
		</article>

		<nav id="main_nav">
			<ul>
				<li><a href="">This</a></li>
				<li><a href="">That</a></li>
				<li><a href="">The other</a></li>
			</ul>
			<p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
		</nav>

		<!-- Link back to HTML Dog: -->
		<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
	</div>
</body>
</html>

And another using Javascript:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Show / hide navigation (JavaScript)</title>
	<style>
		body {
			background: #333;
			color: #000;
			margin: 0;
			font: 300 18px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
	
		#container {
			width: 240px;
			position: relative;
			background: #fff;
			margin: 0 auto;
			padding: 40px;
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}
	
		#main_nav {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			width: 100%;
			
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}

		.with_nav #main_nav {
			display: block;
		}

		.access_aid {
			display: none;
		}

		#access_nav {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 0;
			padding-top: 40px;
			overflow: hidden;
			border: 1px solid #ccc;
			background: white 10px 10px / 20px 20px no-repeat;

			background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
			background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
			z-index: 1;
		}

		.with_nav #access_nav {
			background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
		}
	</style>
</head>
<body id="body">
	<div id="container">
		<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
		<article>
			<h1>Show / Hide Navigation (JavaScript)</h1>
			<p>An example of a simple technique to show and hide navigation, using <em>JavaScript</em>. Particularly useful when designing for mobile.</p>
			<p>This also uses CSS gradients to produce the "show" and "hide" button icons instead of images.</p>
			<p>Delightful.</p>
			<p>See <a href="http://www.htmldog.com/techniques/showhide/">the related HTML Dog Techniques article</a> for more.</p>
		</article>

		<nav id="main_nav">
			<ul>
				<li><a href="">This</a></li>
				<li><a href="">That</a></li>
				<li><a href="">The other</a></li>
			</ul>
			<p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
		</nav>

		<!-- Link back to HTML Dog: -->
		<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
	</div>
</body>
<script>
	var nav = document.getElementById('access_nav'),
	    body = document.body;

	nav.addEventListener('click', function(e) {
		body.className = body.className? '' : 'with_nav';
		e.preventDefault();
	});
</script>
</html>

Hope this helps :+1:

2 Likes

Hi!

Your code looks nice, I guess a way to do this is to hide the navbar when you redirect to another page, let me explain.

Those links, they are there to redirect the user to another page (hopefully). So when they redirect to that page you can add remove the code that makes the navbar in that html file basically.

But I assume you still want the user to access the navbar when it hides, so I guess you’d probably have to either use a little bit Javascript or make the navbar smaller and then expands when the user hovers over the links or the navbar itself, how? It’s easy, just a little bit :hover pseudo codes and animations and you’ll have a expanding and contracting navbar! :smile_cat:

I hope that helps! :wave:

1 Like

Thank you for your answers. Really helpful :slight_smile:

It looks like this: @jasonburns502


And if I click the links (which lead to different sections on the same page) I want the navbar in this case the ul to dissapear. Do you know this? I like your example but it is too different from mine…

What do you want to know then? :joy: