Skip to main content
S
simont79169723
Known Participant
January 2, 2020
Answered

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

  • January 2, 2020
  • 1 reply
  • 808 views

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 topic has been closed for replies.
Correct answer osgood_

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>

 

1 reply

O
osgood_Correct answer
Brainiac
January 2, 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: #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>

 

    S
    simont79169723Author
    Known Participant
    January 2, 2020

    Excellent, just what we were looking for thanks!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices