Simple Collapsable Navbar

Developer
Dan
Size
2,667 Kb
Views
8,096
  1. Simple Collapsable Navbar Previews
  2. Simple Collapsable Navbar HTML Codes
  3. Simple Collapsable Navbar CSS Codes
  4. Simple Collapsable Navbar JS Codes

How do I make an simple collapsable navbar?

Collapsable navbar templates such as Bootstrap exist but often include a lot of extra stuff that you have to remove if you just want something simpler. This is that something simpler. I wanted to build something extremely simple and easy to modify so that it can be used anything that just requires a simple navbar that collapses for a mobile screen.. What is a simple collapsable navbar? How do you make a simple collapsable navbar? This script and codes were developed by Dan on 07 January 2023, Saturday.

Simple Collapsable Navbar Previews
IQ Test

Simple Collapsable Navbar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Collapsable Navbar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <div class="navWide"> <div class="wideDiv"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="navNarrow"> <i class="fa fa-bars fa-2x"></i> <div class="narrowLinks hidden"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>
</nav> <script src="js/index.js"></script>
</body>
</html>

Simple Collapsable Navbar - Script Codes CSS Codes

nav {	background-color: #CCC;	overflow: hidden;	padding: 1em;	border-bottom: 1px solid #000;
}
nav	a {	color: #000;
}
nav	a:visited {	color: #000;
}
nav .navWide {	display: none;	margin: 0 auto;
}
nav .navWide .wideDiv {	text-align: center;
}
nav .navWide .wideDiv a {	text-decoration: none;	display: inline-block;	/*Adjust padding to increase/decrease the space between links.*/	padding: 0 2em;
}
/*Navbar is set to default with the "hamburger" and links on the left
side of the screen. To move to the right of the screen, simply
change the three "float: Left;" references to read "float: right;".*/
nav	.navNarrow i {	float: left;	cursor: pointer;	color: #000;
}
nav .navNarrow .narrowLinks a {	text-decoration: none;	display: block;	float: left;	clear: left;	padding: 0.5em 0;
}
.hidden { display: none;
}
/*Adjust breakpoint as desired to select when the "hamburger" menu is
replaced by just the links.*/
@media (min-width: 480px) {	nav .navWide {	display: block;	}	nav .navNarrow {	display: none;	}
}

Simple Collapsable Navbar - Script Codes JS Codes

'use strict';
var navLinks = document.querySelector('.navNarrow');
var narrowLinks = document.querySelector('.narrowLinks');
navLinks.addEventListener('click', toggle);
function toggle() {	narrowLinks.classList.toggle('hidden');
};
Simple Collapsable Navbar - Script Codes
Simple Collapsable Navbar - Script Codes
Home Page Home
Developer Dan
Username danbuda
Uploaded January 07, 2023
Rating 3.5
Size 2,667 Kb
Views 8,096
Do you need developer help for Simple Collapsable Navbar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dan (danbuda) Script Codes
Name
Alphabetizing Lists with JavaScript
My First Mixin
Sorting Items While Ignoring Articles
Just Some Buttons
Sticky Footer
CSS Grid Using Inline-Block
Sass Mixin Example
Simple React Router
JavaScript Alphabetize Function
React Routing with this.props.children
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!