We Keep Coding

Burger menu doesn't display with CSS, JS and HTML

I ran into a problem displaying a burger menu for my website. I wanted it to appear on the top right corner but somehow the menu is invisible right now.
I leave my source codes so I appreciate it if any of you could advise me on this.
$(document).ready(function(){
$(".burger").on("click", function(){
$("nav li").toggleClass("open");
});
});
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background: pink;
color: pink;
List-style: none;
clear: both;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Header -->
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li><img class="icon" src="./resources/images/instagram (1.png"></li>
<li><img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;"></li>
</ul>
</nav>
<nav class="mobile">
<!-- Navigation Burger-->
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div>
<br>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</nav>
</div>
</header>

There's two issues in your code. Firstly the rules in the <1000px media query don't override the default display: none setting of the header .mobile element. Secondly you're applying the styling for the lines of the burger icon to the .burger div directly, instead of this child div within it. If you fix the following two issues, the code works correctly:
#media only screen and (max-width: 1000px) {
header .mobile {
/* other rules... */
background-color: transparent;
display: block;
}
/* OLD: header .mobile .burger { */
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
Working example:
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background-color: transparent;
color: pink;
List-style: none;
clear: both;
display: block;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li>
<img class="icon" src="./resources/images/instagram (1.png">
</li>
<li>
<img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;">
</li>
</ul>
</nav>
<nav class="mobile">
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div><br>
<ul>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</nav>
</div>
</header>
As an aside, note that your HTML isn't valid as the li elements need to be children of a ul

my sub navigation bar is visible when i hover over the navbar element itself but disappears when i hover over it

I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help

You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo

making a dropdown menu using javascript

I am trying to create a dropdown menu for "My Journeys" in the navigation bar using javascript, and I am using flex for the css. And I have no idea what to do, all of the tutorials I've watched didn't use flex for the code. Thank you for your help!
This is my html body code
<body>
<script src="script.js" type="text/javascript"></script>
<div class="pagewrap">
<header>
<img alt= "header" src = "pict/header.jpg">
</header>
<nav>
<ul>
<li> Home </li>
<div id="dropdown">
<li> My Journeys</li>
</div>
<li> Media </li>
<li> About Me & This Blog </li>
</ul>
<form>
<input type="search" placeholder="search...">
<input type="image" src="pict/search-white.png" alt="search">
</form>
</nav>
</div>
</body>
and this is my css code
.pagewrap{
display: flex;
flex-direction: column;
background-color: blue;
width: 75%;
margin: 0 auto;
background-color: black;
}
body{
background-image: url(pict/wallpaper.jpeg);
}
header img{
width: 100%;
margin-top: 4%;
}
nav{
display: flex;
flex-direction: row;
order: -1;
height: 8%;
width: 75%;
top: 0;
background-color: black;
opacity: 0.9;
align-items: center;
position: fixed;
}
nav ul{
display: flex;
flex-grow: 1;
}
nav ul li, #dropdown{
list-style: none;
flex-grow: 1;
margin: 0 2%;
}
nav ul li a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family: 'Candal', sans-serif;
font-size: 100%;
}
nav ul li a:hover{
color: #660066;
}
form{
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
width: 20%;
height: 50%;
}
form input[type="search"]{
border-width: 0;
color: white;
background-color: transparent;
}
form input[type="image"]{
margin: auto 2%;
width: 5%;
}

what i have made up from your question is you need my journey drop down with two submenus. Below is the code for same.
Hope it will help.
$('.dropdown').click(function(){ $('.myList').slideToggle(100);});
body {
margin:0;
padding:0;
}
.pagewrap {
background-color: blue;
width: 100%;
background-color: black;
}
body {
background-image: url(pict/wallpaper.jpeg);
}
header img {
width: 100%;
margin-top: 4%;
}
nav {
width:100%;
top: 0;
background-color: black;
position: fixed;
padding:5px;
}
nav ul {
flex-grow: 1;
margin:0;
padding:0;
}
nav ul li, #dropdown {
list-style: none;
display:inline;
margin-right:10px;
}
nav ul li a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family:'Candal', sans-serif;
font-size: 100%;
}
nav ul li a:hover {
color: #F99D9D;
}
form {
flex-direction: row-reverse;
justify-content: flex-start;
width: 20%;
height: 50%;
}
form input[type="search"] {
border-width: 0;
color: white;
background-color: transparent;
}
form input[type="image"] {
margin: auto 2%;
width: 5%;
}
.myList {
position:absolute;
top:24px;
left:0;
background:#A0A0A0;
width:100px;
z-index:1
}
.myList li {
margin:0;
}
.dropdown {
position:relative;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagewrap">
<nav>
<ul>
<li> Home
</li>
<li class="dropdown"> My Journeys
<ul class="myList" style="display:none;">
<li> menu 1
</li>
<li> menu 2
</li>
</ul>
</li>
<li> Media
</li>
<li> About Me & This Blog
</li>
</ul>
</nav>
</div>

How can I get rid of Dots from <ul> in <nav> [duplicate]

This question already has answers here:
how to hide <li> bullets in navigation menu and footer links BUT show them for listing items
(7 answers)
Closed 7 years ago.
This is what my website looks like in Firefox (notice the dots).
This is how it looks in Chrome (No Dots).
Is there a way that I can get the dots to go away?
Here is my code:
function changeText(button) {
button.innerHTML = 'Get Started';
}
.bcafrees {
text-align: center;
font-family:'Roboto', sans-serif;
color: #FFFFFF;
text-align: center;
font-size: 60px;
margin-bottom: 1%;
text-shadow: 1px 1px #000000;
}
nav.header {
margin: 0;
background-color: #66C2FF;
}
nav ul {
width: 100%;
margin: 0;
padding: 0;
height: 4%
}
nav ul li {
width: 4%;
float: left;
margin: 0% 1% 2% 2%;
vertical-align: middle;
text-align: center;
align-items: center;
height: 10px;
margin-top: 0%;
padding-top: 0%;
}
nav ul li a {
display: block;
width: 100%;
text-align: center;
color: #FFFFFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 22px;
vertical-align: middle;
}
nav ul li a:hover {
color: #859999;
}
body {
background-color: #3A75B0;
width: 100%;
max-width: 1000000px;
margin: 0 auto !important;
}
body p {
color: #FFFFFF;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:50px;
padding-top: 10px;
padding-bottom: 5px;
margin: 0;
border: 0;
}
.getStarted {
display: table;
margin: 0 auto !important;
height: 170px;
width: 300px;
background: transparent;
text-decoration: none;
border-style: solid;
border-color: #FFFFFF;
font-family: Helvetica;
text-align: center;
color: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 60px;
padding: 20px 10px 50px 10px;
margin-bottom: 50px;
font-family: 'Raleway', sans-serif;
}
.getStarted a {
text-decoration: none;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #FFFFFF;
font-size: 60px;
margin-bottom: 50px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
footer {
clear: both
color: #FFFFFF;
font-family: TW Cen MT;
padding-top: 5.06%;
position: relative;
}
footer ul {
width: 100%;
list-style: none;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
text-align: center;
display: block;
color: #FFFFFF;
text-decoration: none;
font-family: TW Cen MT;
}
footer div {
background-color: #66C2FF;
height: 100px;
text-decoration: none;
}
.timmy:hover {
color: #3A75B0;
}
.katie:hover {
color: #3A75B0;
}
.katie {
display: table;
margin-left: auto;
margin-right: auto;
width: 70px;
}
.timmy {
display: table;
margin-left: auto;
margin-right: auto;
width: 95px;
}
footer div ul a{
width: 100px;
}
hr {
margin-top: 10px;
color: #FFFFFF;
width: 70%;
}
.getStartedButton:hover {
color: #3A75B0;
background-color: #FFFFFF;
}
.getStartedButton {
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
.getStartedButton a:hover {
color: #3A75B0;
}
.getStarted:hover {
color: #3A75B0;
}
.getStartedButton.getStarted:hover {
color: #3A75B0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="welcome.css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="Welcome.js"></script>
<title>BCA Frees</title>
</head>
<body>
<header>
<div class="bcafrees">
BCA Frees
</div>
<nav class="header">
<ul>
<li></li>
<li></li>
<li class="home">Home</li>
<li></li>
<li></li>
<li class="about">About</li>
<li></li>
<li></li>
<li class="faqs">FAQs</li>
<li></li>
<li></li>
<li class="credits">Credits</li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<div id="wrapper">
<div class="p">
<p>Find Your Friends</p>
<p>During Your Frees</p>
<hr />
<br />
</div>
<div class="getStartedButton">
<a href ="/signup">
<button onmouseover="changeText(this)" class="getStarted">
Get Started
</button>
</a>
</div>
</div>
<footer>
<div id="footer">
<ul>
<li>Copyright BCA Frees 2014</li>
<hr class="hr" />
<li>Created By:</li>
<li class="timmy">Timothy Obiso</li>
<li class="katie">Katie Katz</li>
</ul>
</div>
</footer>
</body>
</html>

Add a list-style: none; in the nav ul li selector:
nav ul li {
list-style: none;
width: 4%;
float: left;
margin: 0% 1% 2% 2%;
vertical-align: middle;
text-align: center;
align-items: center;
height: 10px;
margin-top: 0%;
padding-top: 0%;
}

To remove the bullets, or numbers, from a list you can use list-style: none;. It's also worth noting that you may want to remove the default padding that's automatically created for the list.
HTML
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
CSS
ol, ul {
list-style: none;
padding: 0; /* Optional to remove default padding */
}
An example can be seen on jsFiddle: http://jsfiddle.net/jamesjefferyUK/p26afsp1/1/

How do i make a dynamic header resize itself?

I want to make header that resizes itself based on the size of the users screen. So far i have an image on the left and a menu on the right. i want the menu's margin from the right to get smaller until a point where the image begins to get smaller and then if it gets even smaller the menu goes bellow the image.
Here is the HTML code:
<body>
<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<div id="header_logo"></div>
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home
<li>#
<li>#
<li>#
<li>#
</ul>
</div>
Here is the CSS code:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
float: left;
width: 100%;
height: 250px;
border: none;
}
#header_logo {
background: url("images/logo.png")no-repeat;
float: left;
width: 300px;
height: 135px;
margin: 50px 0px 0px 50px;
}
.navbar {
float: right;
margin-top: 125px;
margin-right: 100px;
width: 600px;
}
.navbar li {
float: left;
list-style-type: none;
}
.navbar li a {
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.navbar li a:hover{
color: #000000;
background-color:#0040FF;
}
Thank you i would be grateful for any help.

Then I would suggest to either keep the horizontal things in percentage or use css media queries.
percentage example is here:
HTML:
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<img src="images/logo.png" />
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
CSS:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
height: 250px;
}
#header_logo {
float: left;
width: 20%;
margin: 50px 0 0 5%;
}
#header_logo img{width:100%;}
.navbar {
float: right;
margin-top: 125px;
margin-right: 5%;
text-align:right;
width: 60%;
}
.navbar li {
display:inline-block;
list-style-type: none;
}
.navbar li a {
display:block;
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font:bold 15px 'Open Sans', sans-serif;
}
.navbar li a:hover{
color: #000;
background-color:#0040FF;
}
Jsfiddle: http://jsfiddle.net/ashishanexpert/kvg4F/
Good luck!