Highlighted

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

Community Beginner ,
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!

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> 

 

TOPICS
Browser, Code

Views

322

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

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

Community Beginner ,
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!

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> 

 

TOPICS
Browser, Code

Views

323

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
Jan 02, 2020 0
LEGEND ,
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
Reply
Loading...
Jan 02, 2020 2
Community Beginner ,
Jan 02, 2020

Copy link to clipboard

Copied

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
Reply
Loading...
Jan 02, 2020 0