Equally spaced Nav menu (with hamburger effect-without using Bootstrap)

Community Beginner ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

Morning to all on here, jsut a quick question which I can only find partially answered – we're looking to do a nav bar with 5 categories in Dreamweaver that is equally spaced across the width of a website, that still has the hamburger icon when it's viewed on smaller screens, but without using any Bootstrap coding? Have seen a flexbox solution, though that doesn't collapse into a hamburtger icon when the menu is viewed on a smaller screen

 

Thanks for any help!

TOPICS
Browser , Code

Views

484

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jan 02, 2020 Jan 02, 2020

This should get you to where you want to go, or near to it (No Bootstrap harmed in this example):

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Responsive Nav</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
* {
box-sizing: border-box;
}
.nav {
background-color: #f2f2f2;
}
.nav ul {
display: flex;
justify-content: space-around;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #f2f
...

Likes

Translate

Translate
LEGEND ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

This should get you to where you want to go, or near to it (No Bootstrap harmed in this example):

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Responsive Nav</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
* {
box-sizing: border-box;
}
.nav {
background-color: #f2f2f2;
}
.nav ul {
display: flex;
justify-content: space-around;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
@media screen and (max-width: 768px) {
.nav ul {
display: none;
flex-direction: column;
}
}
.nav li {
margin: 0;
padding: 0;
list-style: none;
width: 20%;
}
@media screen and (max-width: 768px) {
.nav li {
width: 100%;
}
}
.nav a {
text-decoration: none;
display: block;
text-align: center;
color: #666;
padding: 10px;
}
.hamburger {
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
display: none;
text-align: right;
background-color: #f2f2f2;
padding: 10px 20px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.hamburger {
display: block;
}
}
.nav ul.show {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<div class="hamburger"><i class="fa fa-bars"></i></div>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

<script>
const hamburger = document.querySelector('.hamburger');
const navigation = document.querySelector('.nav ul');
const icon = document.querySelector('.fa-bars');
hamburger.onclick = function()	{
if(icon.classList.contains('fa-bars')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-minus');
}
else {
icon.classList.remove('fa-minus');
icon.classList.add('fa-bars');	
}
navigation.classList.toggle('show');
}
</script>
 
 </body>
 </html> 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

LATEST

Excellent, just what we were looking for thanks!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines