How do I correct the CSS or JS in my template?

Max Hodgess 0
Viewed 9

I am having a problem. I have created a template from several ideas including sticky top navbar, dropdown on hover in desktop mode but it becomes dropdown on click as it becomes mobile responsive size and some other features I like. The problem is that in desktop mode as soon as scroll up and the header becomes sticky, the dropdown on hover menus stop working. Also in mobile size, when I press the hamburger, the sticky the menu disappears until I scroll again. I really like this template design and created it from combining several designs and know it is a problem with either my CSS of JS at the bottom of the page but am at a loss. Please help!

This is my current html. It is a single html file with only one link to fontawesome which is how I prefer it. Below it the HTML. (the repeated 'aaa' is to make the website long enough to see the sticky navbar happen).

// When the user scrolls the page, execute myFunction
window.onscroll =  function() {myFunctionSticky()}; 
// Get the topnav
var topnav = document.getElementById("myTopnav");
// Get the offset position of the navbar
var sticky = topnav.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunctionSticky() {
   if (window.pageYOffset >= sticky) {
    topnav.classList.add("sticky")
   } else {
   topnav.classList.remove("sticky");}}
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";}
    else {
    x.className = "topnav";}}
function resetthis(){
var x = document.getElementById("myTopnav");
var butt = document.querySelectorAll(".dropbtn");
    for(i = 0; i<butt.length;i++){
    butt[i].nextElementSibling.removeAttribute("style")}
x.className = "topnav";}
function init(){
var x = document.querySelector("#myTopnav");
    var butt = x.querySelectorAll(".dropbtn"); 
    for(i = 0; i<butt.length;i++){
   butt[i].nextElementSibling.style.display="";
        butt[i].onclick=function(){
    if(x.className.indexOf("responsive")!= -1){
    if(this.nextElementSibling.style.display=="none" || this.nextElementSibling.style.display=="")
        {this.nextElementSibling.style.display="block";}
        else
        {this.nextElementSibling.style.display="none";}}}}}
window.onresize = function(){
resetthis();}
init();
body {
  margin:0;
  font-family:Arial}
.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;}
.topnav {
  overflow: hidden;
  background-color: #333;}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;}
.active {
  background-color: #4CAF50;
  color: white;}
.topnav .icon {
  display: none;}
.dropdown {
  float: left;}
.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;}
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;}
.content {
  padding: 16px;}
.topnav > .dropdown .dropdown {
  overflow: visible;
  float: none;
  position: relative;}
.topnav > .dropdown .dropdown > .dropbtn {width: 100%;background-color: #555;}
.topnav > .dropdown .dropdown > .dropbtn + .dropdown-content {
  background-color: #ccc; top: 0; left: 95%;}
#myTopnav.topnav:not(.responsive) .dropdown:hover > .dropdown-content {
  display: block;}
.sticky,.topnav.responsive.sticky {
  position: fixed;
  top: 0;
  width: 100%;}
.sticky + .content {
  padding-top: 60px;}
footer {
  position: fixed;
  width: 100%;
  max-width: 1140px;
  bottom: 0;
  border: 0px solid black;
  text-align:center; 
  padding:16px;
  background-color: #555555;}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;}
  .topnav a.icon {
    float: right;
    display: block;}}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;}
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;}
  .topnav > .dropdown .dropdown > .dropbtn + .dropdown-content {background-color: #ccc; top: 0; left: auto;}
  .topnav > .dropdown .dropdown > .dropbtn + .dropdown-content, .topnav > .dropdown .dropdown > .dropbtn { text-indent: 15px;box-shadow: none;}}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-right"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Heading</h2>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
</div>

<div align="center" style="padding: 10px 0px 60px 0px;"></div>

<footer>
<font style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #ffffff;">
Sticky Footer
</font>
</footer>

sticky onclick navbar dropdown
0 Answers
Related