Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Mobile navigation menu immediately closing when opened

Johna

Frontend Developer
Staff Team
Guardian
I'm making this website for someone, link is here: https://crazy-chicken-girl.22web.org

I've made it so that when the width of the window is less than 515px, the navigation bar will change.
When the arrow to open the navigation bar is almost off the screen (by scrolling) and is clicked, before even opening, it closes again. Idk why it's doing that?

It's probably related to this part of the JS, because when I comment it out it doesn't do that.
JavaScript:
window.onscroll = function() {
  if (document.getElementById("header-navigation-bar").style.height == "216px") {
    document.getElementById("header-navigation-bar").style.height = "0px";
    document.getElementById("arrow-nav").setAttribute("points", "0,0 15,15 30,0");
  }
}
 
Just a guess:
When the nav bar opens this func sees it as a scoll and if the nav bar is 216px the func closes it.
Thanks.
Using your answer, I'm guessing it's because the header-navigation-bar wants to stick to the top because of this part of the css:
CSS:
#header-navigation-bar {
  position: sticky;
  top: 0;
}
So then the div (or the whole page, idk) will scroll to be at the top. Then the function will close the menu.

I still don't know how to fix it tho... :thinking:
 
Here. Try this if it fits your needs -
html:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Crazy Chicken Girl</title>
    <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=Overpass&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../_data/colors.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <div class="header-image-top">
        <img src="../_data/images/pp.jpg" alt="profile picture" width="200px" height="200px">
      </div>
      <p>Crazy Chicken Girl</p>
    </header>
    <div id="header-navigation-bar">
      <button id="nav-arrow">
        <svg width="30px" height="16px">
          <polyline id="arrow-nav" fill="none" stroke="black" stroke-width="2px" points="0,0 15,15 30,0"/>
        </svg>
      </button>
      <nav id="navbar">
        <ul>
          <a href="../home/index.php#"><li>Home</li></a>
          <a href="../about/index.php#"><li>About</li></a>
          <a href="../gallery/index.php#"><li>Gallery</li></a>
          <a href="../tutorials/index.php#"><li>Tutorials</li></a>
        </ul>
      </nav>
    </div>
    <section>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Sed nisi lacus sed viverra tellus in hac. Sed euismod nisi porta lorem mollis. Scelerisque varius morbi enim nunc. Eu tincidunt tortor aliquam nulla facilisi. Sed ullamcorper morbi tincidunt ornare massa eget. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Arcu odio ut sem nulla pharetra. Molestie at elementum eu facilisis sed odio morbi. Metus dictum at tempor commodo ullamcorper. Senectus et netus et malesuada fames ac. Viverra nam libero justo laoreet sit. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Ultrices tincidunt arcu non sodales neque sodales ut. Odio ut sem nulla pharetra diam sit amet nisl.

Consequat nisl vel pretium lectus. Curabitur gravida arcu ac tortor dignissim. Tincidunt dui ut ornare lectus sit amet est. Pharetra sit amet aliquam id diam maecenas. Dis parturient montes nascetur ridiculus mus mauris. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Purus viverra accumsan in nisl nisi scelerisque. Proin sed libero enim sed faucibus. Nisi est sit amet facilisis. Neque volutpat ac tincidunt vitae semper quis. Dictum fusce ut placerat orci nulla pellentesque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit.

Turpis massa sed elementum tempus egestas sed sed risus pretium. Placerat vestibulum lectus mauris ultrices eros. At tempor commodo ullamcorper a lacus vestibulum sed. In hendrerit gravida rutrum quisque non tellus. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Blandit cursus risus at ultrices mi. Donec et odio pellentesque diam volutpat commodo sed egestas. Sed elementum tempus egestas sed. Ipsum dolor sit amet consectetur. Est ultricies integer quis auctor elit sed vulputate mi sit.

Etiam dignissim diam quis enim lobortis scelerisque. Turpis cursus in hac habitasse platea dictumst quisque. Sodales ut eu sem integer. Elementum curabitur vitae nunc sed velit. Est placerat in egestas erat imperdiet sed euismod nisi porta. Tortor vitae purus faucibus ornare suspendisse. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Eleifend donec pretium vulputate sapien nec sagittis. Tristique nulla aliquet enim tortor at. Amet consectetur adipiscing elit pellentesque habitant morbi. In nisl nisi scelerisque eu ultrices vitae auctor eu augue. Eu augue ut lectus arcu bibendum at. Duis ut diam quam nulla. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ullamcorper dignissim cras tincidunt lobortis. Tellus at urna condimentum mattis pellentesque id nibh tortor. Gravida arcu ac tortor dignissim. Lectus sit amet est placerat in.

Nisl suscipit adipiscing bibendum est ultricies integer. Tincidunt arcu non sodales neque sodales ut etiam sit. Consequat interdum varius sit amet mattis vulputate enim nulla. Vel risus commodo viverra maecenas accumsan lacus. Id interdum velit laoreet id. Gravida in fermentum et sollicitudin ac orci phasellus. In est ante in nibh mauris cursus mattis molestie a. Nisi vitae suscipit tellus mauris. Id leo in vitae turpis. Id aliquet risus feugiat in ante metus dictum. Diam maecenas ultricies mi eget mauris pharetra et. Massa tincidunt dui ut ornare lectus sit amet est. At risus viverra adipiscing at in tellus integer feugiat scelerisque.

Tincidunt dui ut ornare lectus sit amet est placerat. Ut tellus elementum sagittis vitae. Risus ultricies tristique nulla aliquet enim tortor at. Interdum velit euismod in pellentesque massa. Sed elementum tempus egestas sed sed risus pretium. Pellentesque eu tincidunt tortor aliquam. Non consectetur a erat nam at lectus urna. Scelerisque varius morbi enim nunc faucibus a pellentesque. Lacinia quis vel eros donec ac odio. Quam lacus suspendisse faucibus interdum. Felis eget nunc lobortis mattis aliquam faucibus purus in. Justo laoreet sit amet cursus sit amet dictum sit amet. In cursus turpis massa tincidunt dui.

Gravida quis blandit turpis cursus in hac habitasse platea. Ut venenatis tellus in metus vulputate eu scelerisque. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sed odio morbi quis commodo odio aenean sed. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Commodo viverra maecenas accumsan lacus vel facilisis. Porta nibh venenatis cras sed. Pellentesque habitant morbi tristique senectus. Vitae purus faucibus ornare suspendisse sed nisi. Dolor sit amet consectetur adipiscing. In est ante in nibh. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Mattis rhoncus urna neque viverra justo nec. Turpis cursus in hac habitasse. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Diam quis enim lobortis scelerisque fermentum. A cras semper auctor neque vitae. Purus in mollis nunc sed id semper risus in hendrerit.

Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Quam nulla porttitor massa id neque aliquam vestibulum. In mollis nunc sed id semper risus in hendrerit. Viverra tellus in hac habitasse. Sed faucibus turpis in eu mi bibendum neque egestas. In mollis nunc sed id semper risus. Ut diam quam nulla porttitor massa id neque. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Id cursus metus aliquam eleifend mi. Arcu odio ut sem nulla pharetra diam. Volutpat ac tincidunt vitae semper quis lectus. Morbi quis commodo odio aenean sed adipiscing diam. Felis eget velit aliquet sagittis id consectetur. Nunc id cursus metus aliquam eleifend. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Rhoncus urna neque viverra justo nec ultrices dui. Porttitor eget dolor morbi non arcu. Maecenas ultricies mi eget mauris pharetra.

Tincidunt dui ut ornare lectus sit amet. Sit amet purus gravida quis blandit turpis. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Tellus elementum sagittis vitae et leo. Sit amet est placerat in egestas. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Ac turpis egestas maecenas pharetra convallis posuere. Sagittis nisl rhoncus mattis rhoncus urna neque. Maecenas sed enim ut sem viverra. Suspendisse potenti nullam ac tortor vitae purus.

Scelerisque felis imperdiet proin fermentum leo vel. Sed augue lacus viverra vitae. Amet volutpat consequat mauris nunc congue. Egestas maecenas pharetra convallis posuere morbi leo urna. Auctor augue mauris augue neque gravida in. Amet nisl suscipit adipiscing bibendum est ultricies. Varius morbi enim nunc faucibus a pellentesque sit. Est placerat in egestas erat imperdiet sed euismod. Lobortis elementum nibh tellus molestie nunc non blandit. Ut aliquam purus sit amet luctus venenatis. Pellentesque elit eget gravida cum sociis natoque penatibus et. Suscipit adipiscing bibendum est ultricies integer quis. Odio ut enim blandit volutpat. Morbi leo urna molestie at. In tellus integer feugiat scelerisque. Viverra accumsan in nisl nisi.

Fermentum dui faucibus in ornare. Viverra tellus in hac habitasse platea dictumst. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Morbi tincidunt ornare massa eget egestas. Turpis tincidunt id aliquet risus feugiat. Habitasse platea dictumst quisque sagittis purus sit amet. Diam quam nulla porttitor massa id neque. Elit sed vulputate mi sit. Et sollicitudin ac orci phasellus egestas. Turpis tincidunt id aliquet risus feugiat in ante. Massa id neque aliquam vestibulum. In nibh mauris cursus mattis. Viverra justo nec ultrices dui sapien eget mi. Blandit turpis cursus in hac habitasse. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. In ornare quam viverra orci sagittis eu volutpat. Ac turpis egestas sed tempus urna et pharetra pharetra.

Posuere urna nec tincidunt praesent semper feugiat. Purus gravida quis blandit turpis. Id donec ultrices tincidunt arcu non sodales. Eget duis at tellus at urna condimentum mattis. Diam sollicitudin tempor id eu nisl nunc. Sit amet cursus sit amet. Nibh ipsum consequat nisl vel pretium lectus quam id. Nullam non nisi est sit amet facilisis magna etiam. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Fringilla est ullamcorper eget nulla.

Amet nisl suscipit adipiscing bibendum. Consequat interdum varius sit amet. Viverra adipiscing at in tellus integer. Quam id leo in vitae turpis massa sed elementum tempus. Vitae nunc sed velit dignissim. Pretium fusce id velit ut tortor pretium viverra suspendisse. Egestas maecenas pharetra convallis posuere morbi. Vitae semper quis lectus nulla. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Odio euismod lacinia at quis risus sed vulputate odio ut. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel.

Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Tristique senectus et netus et malesuada fames ac turpis. In metus vulputate eu scelerisque. Varius sit amet mattis vulputate enim. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Eu facilisis sed odio morbi. Tincidunt augue interdum velit euismod in. Mauris augue neque gravida in fermentum. Eget nulla facilisi etiam dignissim diam quis enim. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing.

Cras ornare arcu dui vivamus. Pulvinar sapien et ligula ullamcorper malesuada. Aenean euismod elementum nisi quis eleifend quam. Mauris a diam maecenas sed enim. Enim eu turpis egestas pretium aenean pharetra. Gravida cum sociis natoque penatibus. Vel fringilla est ullamcorper eget. Odio pellentesque diam volutpat commodo sed egestas egestas. Vestibulum lorem sed risus ultricies. Mattis pellentesque id nibh tortor. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Enim sit amet venenatis urna cursus eget. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Nunc sed blandit libero volutpat sed cras ornare. Posuere urna nec tincidunt praesent semper feugiat nibh.

Tincidunt arcu non sodales neque sodales ut etiam. Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Ac ut consequat semper viverra. In dictum non consectetur a. Quisque id diam vel quam elementum pulvinar etiam. In arcu cursus euismod quis viverra nibh cras pulvinar. Congue nisi vitae suscipit tellus mauris. Blandit turpis cursus in hac habitasse platea. Ut morbi tincidunt augue interdum velit euismod in pellentesque. A erat nam at lectus. Id aliquet lectus proin nibh nisl condimentum id. Eget nullam non nisi est sit amet facilisis magna. Mollis nunc sed id semper risus in hendrerit gravida. Congue nisi vitae suscipit tellus mauris a diam maecenas. Posuere ac ut consequat semper viverra nam libero. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Sem et tortor consequat id porta nibh venenatis. Semper feugiat nibh sed pulvinar proin gravida.

Commodo nulla facilisi nullam vehicula ipsum a. Pulvinar mattis nunc sed blandit libero volutpat. Nibh sit amet commodo nulla. Lacus viverra vitae congue eu consequat ac felis. Augue eget arcu dictum varius duis at. Viverra vitae congue eu consequat. Platea dictumst quisque sagittis purus sit amet. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Est pellentesque elit ullamcorper dignissim cras tincidunt. In egestas erat imperdiet sed euismod nisi. Semper risus in hendrerit gravida rutrum quisque non tellus. Est ultricies integer quis auctor elit sed. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Dui accumsan sit amet nulla facilisi morbi tempus iaculis. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper.

Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Commodo nulla facilisi nullam vehicula ipsum a. Egestas quis ipsum suspendisse ultrices gravida dictum. Lacinia at quis risus sed vulputate odio ut. Vel elit scelerisque mauris pellentesque pulvinar. Accumsan lacus vel facilisis volutpat est velit egestas. Habitasse platea dictumst vestibulum rhoncus est. Leo in vitae turpis massa. Dignissim diam quis enim lobortis scelerisque.

Etiam erat velit scelerisque in dictum non consectetur a erat. Id diam maecenas ultricies mi. Quis risus sed vulputate odio ut. Nibh tellus molestie nunc non blandit massa. In fermentum et sollicitudin ac. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Mattis enim ut tellus elementum sagittis vitae et. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Scelerisque felis imperdiet proin fermentum leo vel. Eleifend donec pretium vulputate sapien nec. Ut lectus arcu bibendum at varius vel. Est placerat in egestas erat imperdiet. Arcu ac tortor dignissim convallis aenean et tortor. In massa tempor nec feugiat. Mattis enim ut tellus elementum. Convallis convallis tellus id interdum velit. Amet consectetur adipiscing elit duis. Id ornare arcu odio ut sem. Aenean pharetra magna ac placerat.

In hac habitasse platea dictumst. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Massa tincidunt dui ut ornare lectus sit amet est. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Condimentum id venenatis a condimentum vitae sapien pellentesque. Tincidunt tortor aliquam nulla facilisi cras fermentum. Aliquam etiam erat velit scelerisque in. Semper feugiat nibh sed pulvinar proin gravida. Lorem donec massa sapien faucibus et molestie ac. Risus viverra adipiscing at in tellus integer feugiat. Risus quis varius quam quisque id diam vel quam elementum. Enim ut sem viverra aliquet eget sit amet tellus. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Non arcu risus quis varius quam quisque id. Massa massa ultricies mi quis hendrerit dolor magna eget. Enim sed faucibus turpis in eu mi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Sed nisi lacus sed viverra tellus in hac. Sed euismod nisi porta lorem mollis. Scelerisque varius morbi enim nunc. Eu tincidunt tortor aliquam nulla facilisi. Sed ullamcorper morbi tincidunt ornare massa eget. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Arcu odio ut sem nulla pharetra. Molestie at elementum eu facilisis sed odio morbi. Metus dictum at tempor commodo ullamcorper. Senectus et netus et malesuada fames ac. Viverra nam libero justo laoreet sit. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Ultrices tincidunt arcu non sodales neque sodales ut. Odio ut sem nulla pharetra diam sit amet nisl.

Consequat nisl vel pretium lectus. Curabitur gravida arcu ac tortor dignissim. Tincidunt dui ut ornare lectus sit amet est. Pharetra sit amet aliquam id diam maecenas. Dis parturient montes nascetur ridiculus mus mauris. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Purus viverra accumsan in nisl nisi scelerisque. Proin sed libero enim sed faucibus. Nisi est sit amet facilisis. Neque volutpat ac tincidunt vitae semper quis. Dictum fusce ut placerat orci nulla pellentesque. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit.

Turpis massa sed elementum tempus egestas sed sed risus pretium. Placerat vestibulum lectus mauris ultrices eros. At tempor commodo ullamcorper a lacus vestibulum sed. In hendrerit gravida rutrum quisque non tellus. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Blandit cursus risus at ultrices mi. Donec et odio pellentesque diam volutpat commodo sed egestas. Sed elementum tempus egestas sed. Ipsum dolor sit amet consectetur. Est ultricies integer quis auctor elit sed vulputate mi sit.

Etiam dignissim diam quis enim lobortis scelerisque. Turpis cursus in hac habitasse platea dictumst quisque. Sodales ut eu sem integer. Elementum curabitur vitae nunc sed velit. Est placerat in egestas erat imperdiet sed euismod nisi porta. Tortor vitae purus faucibus ornare suspendisse. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Eleifend donec pretium vulputate sapien nec sagittis. Tristique nulla aliquet enim tortor at. Amet consectetur adipiscing elit pellentesque habitant morbi. In nisl nisi scelerisque eu ultrices vitae auctor eu augue. Eu augue ut lectus arcu bibendum at. Duis ut diam quam nulla. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ullamcorper dignissim cras tincidunt lobortis. Tellus at urna condimentum mattis pellentesque id nibh tortor. Gravida arcu ac tortor dignissim. Lectus sit amet est placerat in.

Nisl suscipit adipiscing bibendum est ultricies integer. Tincidunt arcu non sodales neque sodales ut etiam sit. Consequat interdum varius sit amet mattis vulputate enim nulla. Vel risus commodo viverra maecenas accumsan lacus. Id interdum velit laoreet id. Gravida in fermentum et sollicitudin ac orci phasellus. In est ante in nibh mauris cursus mattis molestie a. Nisi vitae suscipit tellus mauris. Id leo in vitae turpis. Id aliquet risus feugiat in ante metus dictum. Diam maecenas ultricies mi eget mauris pharetra et. Massa tincidunt dui ut ornare lectus sit amet est. At risus viverra adipiscing at in tellus integer feugiat scelerisque.

Tincidunt dui ut ornare lectus sit amet est placerat. Ut tellus elementum sagittis vitae. Risus ultricies tristique nulla aliquet enim tortor at. Interdum velit euismod in pellentesque massa. Sed elementum tempus egestas sed sed risus pretium. Pellentesque eu tincidunt tortor aliquam. Non consectetur a erat nam at lectus urna. Scelerisque varius morbi enim nunc faucibus a pellentesque. Lacinia quis vel eros donec ac odio. Quam lacus suspendisse faucibus interdum. Felis eget nunc lobortis mattis aliquam faucibus purus in. Justo laoreet sit amet cursus sit amet dictum sit amet. In cursus turpis massa tincidunt dui.

Gravida quis blandit turpis cursus in hac habitasse platea. Ut venenatis tellus in metus vulputate eu scelerisque. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sed odio morbi quis commodo odio aenean sed. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Commodo viverra maecenas accumsan lacus vel facilisis. Porta nibh venenatis cras sed. Pellentesque habitant morbi tristique senectus. Vitae purus faucibus ornare suspendisse sed nisi. Dolor sit amet consectetur adipiscing. In est ante in nibh. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Mattis rhoncus urna neque viverra justo nec. Turpis cursus in hac habitasse. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Diam quis enim lobortis scelerisque fermentum. A cras semper auctor neque vitae. Purus in mollis nunc sed id semper risus in hendrerit.

Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Quam nulla porttitor massa id neque aliquam vestibulum. In mollis nunc sed id semper risus in hendrerit. Viverra tellus in hac habitasse. Sed faucibus turpis in eu mi bibendum neque egestas. In mollis nunc sed id semper risus. Ut diam quam nulla porttitor massa id neque. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Id cursus metus aliquam eleifend mi. Arcu odio ut sem nulla pharetra diam. Volutpat ac tincidunt vitae semper quis lectus. Morbi quis commodo odio aenean sed adipiscing diam. Felis eget velit aliquet sagittis id consectetur. Nunc id cursus metus aliquam eleifend. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Rhoncus urna neque viverra justo nec ultrices dui. Porttitor eget dolor morbi non arcu. Maecenas ultricies mi eget mauris pharetra.

Tincidunt dui ut ornare lectus sit amet. Sit amet purus gravida quis blandit turpis. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Tellus elementum sagittis vitae et leo. Sit amet est placerat in egestas. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Ac turpis egestas maecenas pharetra convallis posuere. Sagittis nisl rhoncus mattis rhoncus urna neque. Maecenas sed enim ut sem viverra. Suspendisse potenti nullam ac tortor vitae purus.

Scelerisque felis imperdiet proin fermentum leo vel. Sed augue lacus viverra vitae. Amet volutpat consequat mauris nunc congue. Egestas maecenas pharetra convallis posuere morbi leo urna. Auctor augue mauris augue neque gravida in. Amet nisl suscipit adipiscing bibendum est ultricies. Varius morbi enim nunc faucibus a pellentesque sit. Est placerat in egestas erat imperdiet sed euismod. Lobortis elementum nibh tellus molestie nunc non blandit. Ut aliquam purus sit amet luctus venenatis. Pellentesque elit eget gravida cum sociis natoque penatibus et. Suscipit adipiscing bibendum est ultricies integer quis. Odio ut enim blandit volutpat. Morbi leo urna molestie at. In tellus integer feugiat scelerisque. Viverra accumsan in nisl nisi.

Fermentum dui faucibus in ornare. Viverra tellus in hac habitasse platea dictumst. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Morbi tincidunt ornare massa eget egestas. Turpis tincidunt id aliquet risus feugiat. Habitasse platea dictumst quisque sagittis purus sit amet. Diam quam nulla porttitor massa id neque. Elit sed vulputate mi sit. Et sollicitudin ac orci phasellus egestas. Turpis tincidunt id aliquet risus feugiat in ante. Massa id neque aliquam vestibulum. In nibh mauris cursus mattis. Viverra justo nec ultrices dui sapien eget mi. Blandit turpis cursus in hac habitasse. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. In ornare quam viverra orci sagittis eu volutpat. Ac turpis egestas sed tempus urna et pharetra pharetra.

Posuere urna nec tincidunt praesent semper feugiat. Purus gravida quis blandit turpis. Id donec ultrices tincidunt arcu non sodales. Eget duis at tellus at urna condimentum mattis. Diam sollicitudin tempor id eu nisl nunc. Sit amet cursus sit amet. Nibh ipsum consequat nisl vel pretium lectus quam id. Nullam non nisi est sit amet facilisis magna etiam. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Fringilla est ullamcorper eget nulla.

Amet nisl suscipit adipiscing bibendum. Consequat interdum varius sit amet. Viverra adipiscing at in tellus integer. Quam id leo in vitae turpis massa sed elementum tempus. Vitae nunc sed velit dignissim. Pretium fusce id velit ut tortor pretium viverra suspendisse. Egestas maecenas pharetra convallis posuere morbi. Vitae semper quis lectus nulla. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Odio euismod lacinia at quis risus sed vulputate odio ut. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel.

Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Tristique senectus et netus et malesuada fames ac turpis. In metus vulputate eu scelerisque. Varius sit amet mattis vulputate enim. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Eu facilisis sed odio morbi. Tincidunt augue interdum velit euismod in. Mauris augue neque gravida in fermentum. Eget nulla facilisi etiam dignissim diam quis enim. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing.

Cras ornare arcu dui vivamus. Pulvinar sapien et ligula ullamcorper malesuada. Aenean euismod elementum nisi quis eleifend quam. Mauris a diam maecenas sed enim. Enim eu turpis egestas pretium aenean pharetra. Gravida cum sociis natoque penatibus. Vel fringilla est ullamcorper eget. Odio pellentesque diam volutpat commodo sed egestas egestas. Vestibulum lorem sed risus ultricies. Mattis pellentesque id nibh tortor. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Enim sit amet venenatis urna cursus eget. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Nunc sed blandit libero volutpat sed cras ornare. Posuere urna nec tincidunt praesent semper feugiat nibh.

Tincidunt arcu non sodales neque sodales ut etiam. Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Ac ut consequat semper viverra. In dictum non consectetur a. Quisque id diam vel quam elementum pulvinar etiam. In arcu cursus euismod quis viverra nibh cras pulvinar. Congue nisi vitae suscipit tellus mauris. Blandit turpis cursus in hac habitasse platea. Ut morbi tincidunt augue interdum velit euismod in pellentesque. A erat nam at lectus. Id aliquet lectus proin nibh nisl condimentum id. Eget nullam non nisi est sit amet facilisis magna. Mollis nunc sed id semper risus in hendrerit gravida. Congue nisi vitae suscipit tellus mauris a diam maecenas. Posuere ac ut consequat semper viverra nam libero. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Sem et tortor consequat id porta nibh venenatis. Semper feugiat nibh sed pulvinar proin gravida.

Commodo nulla facilisi nullam vehicula ipsum a. Pulvinar mattis nunc sed blandit libero volutpat. Nibh sit amet commodo nulla. Lacus viverra vitae congue eu consequat ac felis. Augue eget arcu dictum varius duis at. Viverra vitae congue eu consequat. Platea dictumst quisque sagittis purus sit amet. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Est pellentesque elit ullamcorper dignissim cras tincidunt. In egestas erat imperdiet sed euismod nisi. Semper risus in hendrerit gravida rutrum quisque non tellus. Est ultricies integer quis auctor elit sed. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Dui accumsan sit amet nulla facilisi morbi tempus iaculis. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper.

Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Commodo nulla facilisi nullam vehicula ipsum a. Egestas quis ipsum suspendisse ultrices gravida dictum. Lacinia at quis risus sed vulputate odio ut. Vel elit scelerisque mauris pellentesque pulvinar. Accumsan lacus vel facilisis volutpat est velit egestas. Habitasse platea dictumst vestibulum rhoncus est. Leo in vitae turpis massa. Dignissim diam quis enim lobortis scelerisque.

Etiam erat velit scelerisque in dictum non consectetur a erat. Id diam maecenas ultricies mi. Quis risus sed vulputate odio ut. Nibh tellus molestie nunc non blandit massa. In fermentum et sollicitudin ac. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Mattis enim ut tellus elementum sagittis vitae et. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Scelerisque felis imperdiet proin fermentum leo vel. Eleifend donec pretium vulputate sapien nec. Ut lectus arcu bibendum at varius vel. Est placerat in egestas erat imperdiet. Arcu ac tortor dignissim convallis aenean et tortor. In massa tempor nec feugiat. Mattis enim ut tellus elementum. Convallis convallis tellus id interdum velit. Amet consectetur adipiscing elit duis. Id ornare arcu odio ut sem. Aenean pharetra magna ac placerat.

In hac habitasse platea dictumst. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Massa tincidunt dui ut ornare lectus sit amet est. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Condimentum id venenatis a condimentum vitae sapien pellentesque. Tincidunt tortor aliquam nulla facilisi cras fermentum. Aliquam etiam erat velit scelerisque in. Semper feugiat nibh sed pulvinar proin gravida. Lorem donec massa sapien faucibus et molestie ac. Risus viverra adipiscing at in tellus integer feugiat. Risus quis varius quam quisque id diam vel quam elementum. Enim ut sem viverra aliquet eget sit amet tellus. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Non arcu risus quis varius quam quisque id. Massa massa ultricies mi quis hendrerit dolor magna eget. Enim sed faucibus turpis in eu mi.
    </section>
    <footer>
        <div class="footer-left">
            <img src="../_data/images/pp.jpg" alt="profile picture" width="75px" height="75px">
            <p>Crazy<br>Chicken<br>Girl</p>
        </div>
        <div class="footer-right">
            <div class="footer-links-left">
            <ul>
                <a href="../home/index.php"><li>Home</li></a>
                <a href="#"><li>About</li></a>
                <a href="#"><li>Gallery</li></a>
                <a href="#"><li>Tutorials</li></a>
            </ul>
                </div>
                <div class="footer-links-right">
            <ul>
                <a href="#"><li>Contact</li></a>
                <a href="#"><li>Terms & Conditions</li></a>
                <a href="#"><li>Credits</li></a>
            </ul>
            </div>
        </div>
      <div class="copyright">
        <p>Copyright &copy 2022      </div>
    </footer>

    <script>
      let navigation = document.getElementById("header-navigation-bar");
      let navbar = document.getElementById("navbar")
      let nav_arrow = document.getElementById("nav-arrow");
      let arrow_nav = document.getElementById("arrow-nav");
      let nav_pos = navigation.getBoundingClientRect().top;

      window.addEventListener('scroll', () => {
        let scroll_pos = window.scrollY;

        if(scroll_pos > nav_pos) {
          navigation.classList.add('sticky');
        } else {
          navigation.classList.remove('sticky');
        }
      })

      nav_arrow.addEventListener('click', () => {
        if (navbar.style.display == "block") {
            navbar.style.display = "none";
            arrow_nav.setAttribute("points", "0,0 15,15 30,0");
          } else {
            navbar.style.display = 'block';
            arrow_nav.setAttribute("points", "0,16 15,1 30,16");
          }
      })
    </script>
</body>
</html>
css:
CSS:
* {
    /*outline: 1px black dashed;*/
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
}
 
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background-color: #eee;
}
 
::-webkit-scrollbar-thumb {
    background: #ccc;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}
 
header {
    background-color: var(--color-theme-yellow);
    text-align: center;
    padding-bottom: 10px;
    font-family: lfl, roboto, sans-serif;
    font-size: 350%;
}
 
.header-image-top img {
    border-radius: 50%;
    margin: 20px;
    margin-bottom: 10px;
}
 
 
.footer-left img {
    border-radius: 50%;
    display: inline;
    float: left;
    margin: 15px;
}
 
.footer-left p {
    font-family: lfl, roboto, sans-serif;
    font-size: 150%;
    display: inline;
    float: left;
    margin: 15px;
    margin-left: 0px;
}
 
#header-navigation-bar {
    padding: 10px;
    text-align: center;
    background-color: #FFF;
}
 
#header-navigation-bar li {
    list-style: none;
    display: inline;
    padding: 10px 30px;
    border-radius: 5px;
    transition: 0.2s;
}
 
#header-navigation-bar a {
    text-decoration: none;
    color: black;
    font-family: lfl, sans-serif;
    font-size: 175%;
}

#navbar {
    width: 100%;
}
 
#header-navigation-bar li:hover,
#nav-arrow:hover {
    background-color: #ECCF5C;
}

.sticky {
    position: sticky;
    top: 0;
    width: 100%;
}
 
footer {
    display: flex;
    background-color: var(--color-theme-yellow);
}
 
.footer-left {
    width: 25%;
}
 
.footer-right {
    display: flex;
}
 
.footer-links-left li,
.footer-links-right li {
    list-style: none;
}
 
.copyright p {
    color: #222;
    float: right;
    font-family: Roboto, sans-serif;
}
 
.footer-right a {
    color: #222;
    font-family: Roboto, sans-serif;
    text-decoration: none;
}
 
.footer-right a:hover {
    color: #333;
    text-decoration: underline;
}
 
.footer-links-left,
.footer-links-right {
    padding: 15px 30px;
}
 
@media only screen and (max-width: 514px) {
    #nav-arrow {
          display: block;
          width: 100%;
          height: 49px;
          text-align: center;
          background-color: var(--color-theme-yellow);
          border: none;
          transition: 0.2s;
          cursor: pointer;
    }
 
    #header-navigation-bar {
         overflow: hidden;
         transition: 0.5s;
          padding: 0px;
    }

    #navbar {
        display: none;
    }
 
    #header-navigation-bar li {
          display: block;
    }
}
 
@media only screen and (min-width: 515px) {
    #nav-arrow {
          display: none;
    }
 
    #header-navigation-bar {
         height: auto !important;
          padding: 10px !important;
    }
}
 

Buy us a coffee!

Buy me a coffee.
Back
Top Bottom