Develop Reference

How to make hamburger close upon click of links

I know this has been asked before, but my setup seems different than the ones I've found so far.
My code is as follows (really bad at coding, by the way)
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family:Helvetica;
}
.topnav {
overflow: hidden;
background-color: white;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #add8e6;
color: black;
}
.topnav a.active {
background-color: white;
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 1000px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
color: black
}
}
#media screen and (max-width: 1000px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<div class="topnav" id="myTopnav">
Toimiva vatsa
Palautteet
Lyhyt sisältö
Tarkka sisältö
Jäsenyys ilmaiseksi
UKK
Hinta
Oma<br>kokemukseni
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Not sure what to do to make the hamburger fold after clicking one of the anchor links.
Also, for some reason some iOS users state that the menu (when not in hamburger) is on the left, not centered.
Thank you!

You could add the same function to those navigation items.
let navLinks = document.querySelectorAll('.topnav a:not(.icon)');
navLinks.forEach((link)=>{
link.addEventListener('click', function(e) {
e.preventDefault();
myFunction();
})
});
Or you could add it to all those together, since you are calling the same function.
let navLinks = document.querySelectorAll('.topnav a');
navLinks.forEach((link)=>{
link.addEventListener('click', function(e) {
e.preventDefault();
myFunction();
})
});
and remove it from your html:
<a href="#close" class="icon">
<i class="fa fa-bars"></i>
</a>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
let navLinks = document.querySelectorAll('.topnav a:not(.icon)');
navLinks.forEach((link)=>{
link.addEventListener('click', function(e) {
e.preventDefault();
myFunction();
})
});
body {
margin: 0;
font-family:Helvetica;
}
.topnav {
overflow: hidden;
background-color: white;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #add8e6;
color: black;
}
.topnav a.active {
background-color: white;
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 1700px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
color: black
}
}
#media screen and (max-width: 1700px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Toimiva vatsa
Palautteet
Lyhyt sisältö
Tarkka sisältö
Jäsenyys ilmaiseksi
UKK
Hinta
Oma<br>kokemukseni
<a href="#close" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

Dropdown menu is not working as expected in mobile view

I'm trying to add a dropdown menu to the mobile version of my site, but it doesn't seem to be working (I'm very new to web design).
The dropdown menu is correctly shown by clicking on the correspondent icon; the problem is that it is also shown by clicking at any point of the topnav menu. I just want the dropdown menu to appear only by clicking on the dropdown menu icon. Moreover, I'd the dropdown menu to disappear by clicking at any point outside of it. This is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
Floor Plan
Address
Project Overview
Location Advantage
Download
Similar Projects
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
let topnav = document.querySelector("#myTopnav");
topnav.onclick = function() {
this.classList.toggle('responsive');
}
</script>
</body>
</html>
Here you can try my code.
Hope you guys will help me.

You can check this answer. I have done the first part and another person helped me to do the second part.
Code below-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>

How to show *just* the menu 'hamburger' when page at mobile phone width?

I am a CSS beginner, so far using css only to change colours and size, while copying and pasting for things like JavaScript. Thus I am trying to adjust an responsive navigation bar from w3schools.com that generally looks what I require.
My problem is when the screen width is reduced to mobile width, the result, as well as the three lines (hamburger), there is also the word 'Home' rather than just the three lines. The code I've used comes from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav, while my test page is at
https://www.abelard.org/mobile/test1.php.
It looked to me as if the code section
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
It appeared to me to be the relevant area controlling the nav bar display, my alteration removing the line .topnav a:not(:first-child) {display: none;} makes no difference. I cannot see where else might help.
html...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img src="/library/menu-burger-grn.png">
</a>
</div>
<div style="padding-left:16px">
<h2>test page for nav bar</h2>
<p>First step</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
style.css...
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px)
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>

Responsive navigation menu in JavaScript

I am trying to build a responsive navigation menu for my website. However, it should also stick to the top when you scroll further down the page. This works fine on the normal 'desktop-size' menu, but when I expand the list items in the responsive navigation menu, the whole menu re-positions itself back to the top.
let navbar = document.querySelector("nav");
let offset = navbar.offsetTop;
// Makes the menu sticky
function stick() {
if (window.pageYOffset >= offset) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
// Makes the menu responsive
function collapse() {
if (navbar.className === "responsive") {
navbar.classList.remove("responsive");
} else {
navbar.classList.add("responsive")
}
}
My JSFiddle: https://jsfiddle.net/MihkelPajunen/t37g6hsc/
Question: Is there a way to make the responsive navigation menu sticky, so that the menu is accessible at the top of the page, even when you scroll further down the page?

Remove the following rule:
nav.responsive {
position: relative;
}
As this is overriding the position: fixed rule.
Also, change the collapse function like so:
if (navbar.className.indexOf("responsive") >=0 ) {
As the class name will actually be something like "responsive sticky"
Here's a fork of that fiddle

Try To use this one instead of yours
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>

Make media query take priority over function

I am trying to make my navigation bar responsive but I am having issues making an image (our logo) appear and disappear when desired.
First of all the default is that the navigation bar has our standard logo displayed and the alternative one hidden:
Then when moving onto a smaller screen I am using a media query to change the color of the navigation bar, hide one logo, show another logo and add a hamburger menu.
Since I found that clicking the hamburger menu, and viewing the links in block display, the alternative logo sat in the way of the first link. So I used a function to hide it (triggered upon clicking on the hamburger menu)
So far so good, clicking on the hamburger menu toggles the logo appearing and disappearing. However, if you collapse the menu without going to another page the function toggles the logo on again - which is fine until you resize the page and make it larger. Then the logo just sits in the way and isn't made to disappear by the media query.
I have tried using !important tags but honestly at a bit of a loss of how to do this final step. Any feedback would be much appreciated!
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../Style/Basic Styling.css"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="page">
<div id="page_container">
<!--Nav Bar Start -->
<div class="topnav" id="myTopnav">
<img id="CElogo" src="https://imgur.com/gallery/Zmuzg62" alt="CE logo" title="CE logo" >
<img id="CElogoNoTextID" class="CElogoNoText" src="https://i.imgur.com/Kr3ACDH.jpg" alt="CE logo No Text" title="CE logo No Text" >
Blog
Pricing
<a id="homeNav" class="homeNavClass" href="http://localhost:63342/untitled/Home Page/Climate Edge.html">Home</a>
☰
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var y = document.getElementById("CElogoNoTextID");
if (y.style.display === "none" ) {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
</script>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin:0;
}
#page {
margin:0;
background:none;
overflow:auto;
}
#page_container {
margin:0 0px;
}
#HeaderImage {
width: 100%;
line-height:1px;
z-index: 3;
}
.topnav {
overflow: hidden;
width: 100%;
margin-top: 0%;
z-index: 2;
position: absolute;
background: none;
}
#homeNav{
display:none; !important
}
.topnav a {
float: right;
color: black;
padding: 25px 16px;
text-decoration: none;
z-index: 1;
font-family: Lato;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav img {
width: 130px;
margin-left: 5px;
margin-top: 7px;
position:absolute;
overflow: auto;
}
#CElogoNoTextID {
display: none;
}
.topnav .icon {
display: none;
}
#DataToAction {
width: 30vw;
margin-left: 35vw;
margin-right: 35vw;
margin-top: 5vw;
position:absolute;
}
#media screen and (min-width: 601px)and (max-width: 1000px) {
.topnav a {
font-size: 16px;
}
#DataToAction{
display:none;
}
.topnav img {
display:none;
}
#CElogoNoTextID{
display: none; !important;
}
}
#media screen and (max-width: 600px) {
#HeaderImage {
margin-top: 80px;
}
#CElogoNoTextID{
display:block;
float:left;
margin-top: 0px;
width: 90px;
}
.topnav {
background: #29ABE2;
}
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
#homeNav{
float: right;
display: block;
color: white;
}
.topnav img{
display: none;
}
#DataToAction{
display:none;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
color:black;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive a.homeNavClass {
display: block;
text-align: left; !important;
}
}
Please see the jsfiddle here