I am trying to make a simple social network website. I am using a top navigation panel and a side navbar.
The problem I am facing is that I am not able to add any components in the blank area that you are able to see in the image.
This is my HTML body with the CSS I am using:-
//css code for sidebar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #D96AA7;
--secondary-color: #422C73;
--complimentary-color: #88BFB5;
--contrast-color: #F2E527;
--light-color: #D2A9D9;
}
.container {
background: #191919;
min-height: 100vh;
font-family: Montserrat, sans-serif;
}
nav a {
font-size: 40px;
color: #fff;
text-decoration: none;
padding: 20px;
text-align: center;
}
nav {
position: fixed;
left: 0;
z-index: 50;
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100vh;
background: var(--secondary-color);
}
section {
position: absolute;
top: 0;
height: 100vh;
width: 0;
opacity: 0;
transition: all ease-in .5s;
display: flex;
justify-content: center;
align-items: center;
}
/* Styles applied on trigger */
section:target {
opacity: 1;
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
section:target h1 {
opacity: 0;
animation: 2s fadeIn forwards .5s;
}
#first {
background:var(--primary-color);
}
#second {
background: var(--complimentary-color);
}
#third {
background: var(--contrast-color);
}
#fourth {
background: var(--light-color);
}
#keyframes fadeIn {
100% { opacity:1 }
}
//css code for top navigation
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<body>
<style>
a {
text-decoration: none;
color: white;
}
</style>
<!--this is the top navigation bar-->
<div class="topnav" id="myTopnav">
Home
Chit-Chat
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!--this is side navbar-->
<nav>
<a href="#first"
><abbr title="PROGRAMMING"
><img src="assets/programming.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#second"
><abbr title="SINGING"
><img src="assets/singing.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#third"
><abbr title="DANCING"
><img src="assets/dancing.png" height="100" ,width="100" /></abbr
></a>
<a href="#fourth"
><abbr title="PAINTING"
><img src="assets/painting.jpg" height="100" ,width="100" /></abbr
></a>
</nav>
<div class="container">
<section id="first">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="second">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="third">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
<section id="fourth">
<div class="outer">
<div class="inner">
<label>Back</label>
</div>
</div>
</section>
</div>
</body>
my side navbar opens a div with a close button for now in it as you might be able to see
but I don't understand where I should put the code I want in the blank space.
if I am adding it after my side navbar code it is displaying it in a space under the blank area.
I am using the code for the side navbar from the internet, that is why i am not able to figure it out
pls help
Related
i have a website in html, where I created a mobile menu , as the container was showing some blank space, I gave it a height, after then the mobile menu is not opening. the code is like below:
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 50px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
MENU
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
however this menu is not opening while I click the icon, can anyone please tell me what could be wrong here, thanks in advance
add css to the .mobile-container
z-index: 1000;
you can also try with position style like
position: relative;
Or
position: absolute;
Have you tried adding overflow: visible to your container?
.mobile-container {
overflow: visible;
I'm currently trying to create a website from scratch, seen as I have the time to practice.
So far, I have got a working navigation bar (one which does not actually take you to other pages yet but does actually work ).
I decided to make this navigation bar responsive, as it is quite a big bar.
I have given the option of a vertical bar at a click of a button.
To note, the button is only available to the user when the browser is less than 900px width.
My current issue is that when the button is pressed, nothing is being displayed. I have ensured the javascript for the button is working, via trial and error but still have no luck.
I am new to this, so forgive me if my error is silly but any help would be greatly appreciated.
To help give an idea of what I am trying to achieve, here is the link I have been using as guidance: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
If the issue lays within the fact that I am using an 'unordered list' tag to align my navigation bar to the right and my logo to the left, then any alternative way is welcome too!
Thank you.
P.s. ignore the names of each section in the navigation, I was just filling in the spaces for now ^^
body{
background-color: grey;
margin:0;
}
/*----------------------NAVIGATION BAR----------------------*/
.nav-container{
background-color: white;
float: right;
height: 80px;
position: absolute;
width: 100%;
margin-top: 0;
}
#nav-menu{
float:right;
padding: 13px 13px;
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
float: left;
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 900px) {
#nav-menu li a:not(.icon) {display: none;}
#nav-menu li a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 900px) {
.nav-bar.responsive {position: relative;}
.nav-bar.responsive li a.icon{
position: relative;
right: 0;
top: 0;
}
.nav-bar.responsive li a{
float: none;
display: block;
text-align: left;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="practice.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="nav-container">
<ul id="logo">Dellion</ul>
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a></li>
</ul>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
</script>
</body>
</html>
Simplify your layout by using flexbox
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
body {
background-color: grey;
margin: 0;
}
.nav-container {
display: flex;
background-color: white;
min-height: 80px;
width: 100%;
align-items: center;
flex-wrap: wrap;
}
#logo {
font-size: 27px;
padding: 0 13px;
height: 80px;
line-height: 80px;
}
.nav-bar {
flex-direction: row;
}
.nav-bar li {
list-style: none;
}
.nav-bar a {
color: #000;
font-size: 20px;
padding: 10px 12px;
text-decoration: none;
}
.nav-links {
margin-left: auto;
padding-right: 20px;
display: flex;
flex: 1;
justify-content: flex-end;
}
.hamburger .icon {
/* remove the styling, this code is for illustration purpose only*/
height: 40px;
width: 40px;
background: grey;
border: 1px solid #000;
}
.nav-bar,
.hamburger .icon {
display: none;
}
.hamburger {
position: absolute;
right: 20px;
top: 20px;
}
#media screen and (min-width: 901px) {
.nav-bar,
.nav-bar.responsive {
display: flex;
align-items: center;
}
}
#media screen and (max-width: 900px) {
.hamburger .icon {
display: block
}
.nav-bar.responsive {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
}
.nav-links {
flex-basis: 100%;
margin: 0;
padding: 0;
}
.nav-bar li {
padding: 10px 0;
}
}
<div class="nav-container">
<div id="logo">Dellion</div>
<div class="nav-links">
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
</ul>
<div class="hamburger">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>
</div>
</div>
There is a very simple way:
.nav-container{
background-color: white;
/* float: right; */
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 0;
}
#nav-menu{
/* float:right; */
/* padding: 13px 13px; */
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
/* float: left; */
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
And I recommended you to read this useful article about css Flexbox.
I think part of your problem is, :
Javascript:
if (x.className === "nav-bar") {
x.className += " responsive"; //add space after quotation mark, otherwise class is added adjacent
} else {
x.className = "nav-bar";
}
Css:
.nav-bar.responsive li a{
float: none;
display: block !important; /* I think this needs to be crushed with important */
text-align: left;
/* position: relative; you don't need it */
}
you can simply do it with css
flex-direction: column;
I got have confusing problem with jquery / css. I'm trying to get my navbar link color to change from white to black, and back again when 'entering' into a new nth-child.
So when going over nth-child(3n+1) and (3n+2), the links need to be white, but (3n+3), the links need to go black, and change back at the next cycle.
I've tried to reuse a script for adding classes, but it just keeps adding .white and .black until I go back to the top.
How would I solve this?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+1)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+2)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+3)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("black");
} else {
$(".navbar a").removeClass("black");
}
});
html {
height: 100%;
font-size: 21px;
}
body {
margin: 0px;
font-family: 'Karla', sans-serif;
width: 100%;
height: 100%;
color: white;
}
* {
box-sizing: border-box;
}
/* DESIGN */
.row::after {
content: "";
clear: both;
display: table;
}
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
padding-right: 20vw;
padding-left: 20vw;
}
[class*="col-"] {
float: left;
height: 90vh;
padding-right: 20vw;
padding-left: 20vw;
padding-top: 25vh;
padding-bottom: 15vh;
background-attachment: scroll;
}
[class*="col-"]:nth-child(3n+1) {
/* The image used */
background-image: url("img/bg2.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
[class*="col-"]:nth-child(3n+2) {
background-color: rgb(238, 114, 3);
}
[class*="col-"]:nth-child(3n+3) {
background-color: white;
color: black;
}
.black {
color: black !important;
}
.white {
color: white !important;
}
/* NAVIGATION */
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
/* Set the navbar to fixed position */
top: 5;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
font-size: 25px;
font-weight: bold;
line-height: 1.5em;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
background-color: transparent;
text-align: center;
margin: 20px;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
}
.navbar a:hover {
border-bottom: 1px solid;
}
#media screen and (max-width: 1180px) {
.navbar a {
font-size: 16px;
padding-left: 0px;
padding-right: 0px;
}
}
#media screen and (max-width: 700px) {
.navbar a {
display: none !important;
}
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="thumbnail">
<img class="thumbnail" src="img/RF thumbnail.png">
</div>
<div class="navbar" id="myTopnav">
Contact
Adverts
About us
What is this
<a class="signup" href="#welcome">Sign up</a>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-chevron-up"></i></button>
<!-- CONTENT -->
<div class="row">
<div class="col-4" id="welcome">
</div>
<div class="col-4" id="whatisthis">
<h1>What is this?</h1>
</div>
<div class="col-4" id="adverts">
<h1>Adverts</h1>
</div>
<div class="col-4" id="about">
<h1>About</h1>
</div>
<div class="col-4" id="contact">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
When u scroll down u dont remove a class. You are only adding it.
And the last class is what have the control of the color.
So. You are adding black, then white. After that adding black again will do nothing. There is still
class="black white"
Remove the last class after each section should fix your problem.
And jQuery has also hasClass(className)
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
How do you a menubar work properly menubar with the functions:
*Clicking on hamburger-icon will display the nav-links.
*Clicking on nav-links will hide the menubar.
(without using bootstrap, but doing it from scratch)
I understand that many have asked this question. I have looked at many different solutions, with JS and Jquery, and I have encountered several problems because I really dont understand JS or Jquery fully.
This is how far I´ve gotten. Go to my website hung.no so you can see the problem. On my website, you should minimize the window to get to the hamburger bar. Then you should click on that bar. After that click on one of the nav-links. It closes, but when you try to click on the hamburger bar again, it does not work.
//Navbar collapses to menubar
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
//Jquery code ON MY WEBSITE. I cannot display it here.
//This is the source
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
//$(document).ready(function(){
// $(".nav-link").click(function(){
// $(".nav-toggle").hide();
// });
//});
//$(document).ready(function(){
// $(".nav-show").click(function(){
// $(".nav-toggle").show();
// });
//});
/*mobile navbar*/
.topnav .icon {
display: none;
}
.topnav {
overflow: hidden;
background-color: #fff;
width: 100%;
position: fixed;
z-index: 1000;
}
.topnav a {
float: right;
display: block;
color: #000;
padding: 10px 10px;
text-decoration: none;
font-size: 12px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 700px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
#myNavbar{
display: none;
}
}
#media screen and (max-width: 700px) {
.topnav.responsive {
position: fixed;
width: 100%;
top: 0;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none!important;
display: block;
text-align: left;
}
.mob-font-size{
font-size: 22px;
width: 100%;
}
.mob-logo-size{
width: 177px;
height: 260px;
}
}
/*dekstop navbar*/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
z-index: 9999;
}
.float-right-nav{
padding: 8px 15px;
float: right;
}
#myNavbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
display: block;
color: #000;
text-align: center;
text-decoration: none;
}
div.container
{
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
font: 12px Raleway-medium;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
z-index: 1;
cursor: pointer;
}
<!--desktop navbar-->
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img src="svg/navlogo.svg" alt=""></li>
<li class="float-right-nav"><span class="medium">KONTAKT</span></li>
<li class="float-right-nav"><span class="medium">PRIS</span></li>
<li class="float-right-nav"><span class="medium">GARANTIER</span></li>
<li class="float-right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
<!--Mobile navbar the classes nav-link and nav-toggle is used in the Jquery code located in the Javascript-section in this Code Snippet-->
<div class="topnav" id="myTopnav">
<a style="float:left" href="#home"><img src="svg/navlogo.svg" alt="" height="20" width="18"></a>
<a class="nav-link nav-toggle"href="#Kontakt"><span class="medium">KONTAKT</span></a>
<a class="nav-link nav-toggle"href="#Pris"><span class="medium">PRIS</span></a>
<a class="nav-link nav-toggle"href="#Garantier"><span class="medium">GARANTIER</span></a>
<a class="nav-link nav-toggle"href="#Ommeg"><span class="medium">OM MEG</span></a>
☰
</div>
I see a problem in your javascript function "myFunction"
When you click a first time, you append class "resposive", but when you click again the flow moves to "else" and then it remove "responsive" so you are removing that behaviour.
If you remove that flow then the nav works fine.