Stuck on navbar function

Stuck on navbar function - javascript

I am trying to create collapsed navbar I did the HTML and CSS part but when I do the javascript part it gives me an uncaught reference error. My code is below I provided the HTML CSS and Javascript. I would appreciate it if someone can please help. Thank you in advance. I provided all the code below.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <img src="logo/logo.png" alt="" />
      <div class="container" onclick="btnOpen()">
        <div class="line-1"></div>
        <div class="line-2"></div>
        <div class="line-3"></div>
      </div>
      <nav>
        <ul>
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
            >×</a
          >
          <li><a href="index.html">Home</a></li>
          <li><a href="pages/about.html">About us</a></li>
          <li><a href="pages/contact.html">How to reach me</a></li>
          <li><a href="pages/portfolio.html">Portfolio</a></li>
        </ul>
      </nav>
      <section class="sm">
        <a href="#"><i class="fab fa-facebook-f" class="facebook"></i></a>
        <a href="#"><i class="fab fa-twitter" class="twitter"></i></a>
        <a href="#"><i class="fab fa-google" class="google"></i></a>
      </section>
      <main></main>
      <section></section>
      <footer></footer>
    </header>
  </body>
  <script src="js/script.js"></script>
  <script
    src="https://kit.fontawesome.com/dd4d991431.js"
    crossorigin="anonymous"
  ></script>
</html>
* {
  box-sizing: border-box;
}
header {
  width: 100%;
  background-color: #e1e1e1;
}
header img {
  width: 100px;
  height: 100px;
}
header .container {
  display: inline-block;
  float: right;
}
.container .line-1,
.line-2,
.line-3 {
  width: 35px;
  height: 5px;
  background-color: #111;
  margin: 6px 0;
}
nav {
  display: flex;
  position: absolute;
  top: 100;
  right: 0;
  background-color: #e1e1e1;
  width: 40vw;
  height: 30vh;
}
nav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  text-decoration: none;
  color: #111;
}
nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
nav ul li {
  margin: 10px;
}
nav ul li a {
  text-decoration: none;
  color: #111;
  font-style: bold;
  font-weight: 600;
  font-size: 15px;
  font-family: Roboto;
}
function openBtn() {
  document.getElementsByName("nav").style.width = "40vw";
  document.getElementsByName("nav").style.height = "30vh";
}
openBtn();
function closeNav() {
  document.getElementsByName("nav").style.width = "0";
  document.getElementsByName("nav").style.height = "0";
}
closeNav();

I have added Id to nav and corrected js. Please review.
function btnOpen() {
document.getElementById("nav").style.width = "40vw";
document.getElementById("nav").style.height = "30vh";
}
btnOpen();
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("nav").style.height = "0";
}
closeNav();
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav id='nav'>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>

A couple things need to be fixed, and you don't need any external libraries to do so. First, you have a syntax error on your first div. Your onclick attribute should point to the function openBtn(), not btnOpen().
Secondly, your reference error stemmed from your two functions, openBtn() and closeNav(). When you called document.getElementsByName('nav') you cannot edit the style properties of a NodeList, which is what was being returned. Here's what I changed.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
closeNav()
By using a for-of loop, you can edit each nav element in the HTMLCollection returned by document.getElementsByTagName('nav').
Here's a working example.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="openBtn()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>

Related

My picture won't slide and even change position i JavaSctipt

i'm new in JavaScript Programming. I have some problem. I added some picture that i want to be slideshow with previous and next buttons.
const carouselSlide = document.querySelector('.carouselImage');
const carouselImages = document.querySelectorAll('.carouselImage img');
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextBtn.addEventListener('click',()=>{
carouselSlide.style.transform = 'transform 0.4s ease-in-out';
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
First image and last image are duplicated becouse I want smoothness in this.
Look on the HTML Code
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Benedykt Borowski</title>
<meta name="description" content="Młody człowiek cieszącym się życjem"/>
<meta name="keyword" content="Młody, blog, programista, cieszący się życiem"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="CSS/styleshets.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;700&display=swap" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
</style>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="ParentDiv">
<div id="IndexName">
<h1>Banedykt Borowski</h1>
</div>
<div class="Menu-side-bar" id="IndexMenu">
<ul class="active"> Home</ul>
<li>About me
<div class="drop-down-menu">
<ul>
<li>My bedroom</li>
<li>My workspace</li>
</ul>
</div>
</li>
<li>My travels</li>
<li>My work</li>
<li>My Studing</li>
</div>
<div id="indexText>">
<div id="indexFirstWords">
<p>Witam,<br>
Jestem młodym człowiekiem chcącym pokazać wszystkim ludziom kim jestem,
co robie, jak korzystam z życia i oczywiście jak żyje.</p>
<p>Odrazu odsyłam do zakładek po lewej stronie! <br>
Tam dowiecię się o mnie trochę więcej :D</p>
<p>A jeżeli chcecie poczytać odrazu to na dole pare rzeczy!</p>
<p> Może zacznijmy od moich stanowisk które posiadałem przez większość życia</p>
</div>
<div class="carouselSlide">
<div class="carouselImage">
<img src="./img/setup/FifthPicOfSetup.png" id="LastClone" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" alt="">
<img src="./img/setup/SecondPicOfSetup.jpg" alt="">
<img src="./img/setup/ThirdPicOfSetup.jpg" alt="">
<img src="./img/setup/FourthPicOfSetup.png" alt="">
<img src="./img/setup/FifthPicOfSetup.png" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" id="FirstClone" alt="">
</div>
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
</div>
</div>
</body>
</html>
And CSS file:
.Menu-side-bar{
background-color: aliceblue;
list-style-type:none;
width: 10%;
text-align: left;
font-family: 'Lato', sans-serif;;
font-weight: 300;
}
.Menu-side-bar ul{
padding: 5%;
}
.Menu-side-bar li{
padding: 3%;
}
.Menu-side-bar a{
text-decoration: none;
color: black;
}
.Menu-side-bar li:hover{
color: white;
background-color:green ;
}
.active{
color: white;
background-color:green ;
}
#ParentDiv{
width: 100%;
text-align: center;
}
#IndexName{
display: inline-block;
width: 100%;
color: black;
background-color: aliceblue;
}
#IndexMenu{
float: left;
}
#indexText{
float: left;
}
.drop-down-menu{
display: none;
}
.Menu-side-bar li:hover .drop-down-menu{
display: block;
position: absolute;
background-color: aliceblue;
width: 10%;
padding: 0.1%;
margin-left: -0.3%;
}
#indexFirstWords{
width: 50%;
text-align: center;
display: inline-block;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.carouselSlide{
width: 27%;
margin: auto;
}
.carouselImage{
display: flex;
width: 100%;
height: 500px;
}
Don't know what happend there, my friend is doing it and it works perfectly.
Thanks for all help!

Splide slider disappearing class

I've got little issue with finding right class. I'm making slider and I want to set margin-left on the last element of class called "is-active". I'm not able to find this class in js, but in the web's console it's avabile. What's the reason and how Can I get last class of elements?
document.addEventListener('DOMContentLoaded', function () {
new Splide('.splide', {
perPage: 5,
perMove: 1,
breakpoints: {
500: {
perPage: 2,
},
640: {
perPage: 3,
},
780: {
perPage: 4,
}
}
// autoWith: true,
}).mount();
});
const list = document.querySelectorAll('.splide__slide')
list.forEach(li => {
console.log(li.classList.contains('is-visible'));
});
.splide img {
height: 20vh;
}
.splide__arrow--prev {
margin-right: 100px;
}
.splide__slide__container {
text-align: center;
}
.splide__list {
width: 100px;
}
.info {
display: grid;
grid-template-columns: 57.12vw 14.28vw 28.56vw;
grid-template-rows: 20vh;
}
.info__logo-wrapper {
background: #cecece;
justify-self: center;
width: 100%;
}
.info__logo {
height: 100%;
width: 100%;
padding: 0 2vw;
}
.description {
display: flex;
flex-direction: column;
text-transform: uppercase;
}
.description--flex {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.description__header {
font-weight: 700;
font-family: 'Lato', sans-serif;
color: grey;
font-size: 1.25rem;
}
#media (min-width: 1000px) {
.description__header {
font-size: 1.75rem;
}
}
.description__color {
font-size: 0.75rem;
}
#media (min-width: 1000px) {
.description__color {
font-size: 1.25rem;
}
}
.description__size {
font-weight: 700;
font-size: 1rem;
color: black;
}
#media (min-width: 1000px) {
.description__size {
font-size: 1.5rem;
}
}
.description--background {
background-color: #ebebeb;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="info">
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
</ul>
</div>
</div>
<div class="info__logo-wrapper">
</div>
<div class="description">
<div class="description--flex">
</div>
<div class="description--flex">
</div>
<div class="description--flex description--background">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
</body>
</html>
If I type the same what's in js to the console there're 5 true and 2 false. Why these elements aren't available in script?

How make drop down menu on JavaScript?

please help me with the implementation of the drop-down menu from the list. Now, for practice, I make a site using the Bootstrap 4 library, and I encountered such a problem when clicking on any of the buttons, the list only appears from the first button, but it is necessary that when you click on any of the buttons a nested list will drop out. Thanks!
let getList = document.querySelectorAll('.sideBtn');
for(let a of getList) {
console.log(a);
a.addEventListener('click' , showList);
}
function showList () {
let getHide = document.querySelector('.hide');
console.log(getHide);
for (let i = 0; i < 1; i++) {
if(getHide.style.display == 'block') {
getHide.style.display = 'none';
} else {
getHide.style.display = 'block';
}
}
}
/*for(let b of getHide) {
console.log(b);
if(b.style.display == 'none') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}
.sidebar ul {
list-style-type: none;
}
.sidebar ul li a {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255,255,255,.1);
transition: .4s;
text-decoration: none;
}
ul li:hover a {
padding-left: 50px;
}
.sidebar ul a i {
margin-right: 16px;
}
.hide {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<section class="sidebar">
<ul>
<li class="sideBtn">
<a href="#">
<i class="fas fa-tv"></i>
Сериалы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
<li class="sideBtn">
<a href="#">
<i class="fas fa-film"></i>
Фильмы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
</ul>
</section>
<script src="scritp.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Z-index and position sticky paradox

I know that z-index has problems with different positionings and in this snippet I need them to work together so that I could replicate the navigation on this website http://www.ericryananderson.com/
The problem is that when the overlay is activated the button needs to be z-indexed which the position sticky doesn't like and doesn't allow it causing the overlay to be unclosable. The position sticky is on the nav bar. Is there a workaround this?
var bars = document.querySelector('.bars')
var overlay = document.querySelector('.overlay')
var isMenuOpened = false;
bars.addEventListener('click', function() {
if (isMenuOpened === false) {
bars.classList.remove('fa-bars');
bars.classList.add('fa-times');
overlay.style.display = 'block'
isMenuOpened = true;
bars.style.position = 'fixed'
bars.style.top = '40px';
bars.style.right = '60px';
}else{
bars.classList.remove('fa-times');
bars.classList.add('fa-bars');
overlay.style.display = 'none'
bars.style.position = 'static'
isMenuOpened = false;
}
})
body{
height: 3000px;
}
.video{
width: 100%;
height: 700px;
background: red;
}
nav{
display: flex;
/* position: sticky; */
top: 0px;
justify-content: space-between;
padding: 50px;
background: green;
height: 10px;
}
i{
font-size: 30px;
z-index: 10;
}
.overlay{
position: fixed;
top:0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="video">
</div>
<div class="navigation">
<nav>
<h4>koreys site</h4>
<i class="fas fa-bars bars"></i>
</nav>
</div>
<div class="overlay">
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>

My responsive navigator bar not working

Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>

You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Stuck on navbar function - javascript

Related

My picture won't slide and even change position i JavaSctipt

Splide slider disappearing class

How make drop down menu on JavaScript?

Z-index and position sticky paradox

My responsive navigator bar not working

Categories

Resources