Responsive sticky menu not working after scroll

Question

so I posted a question on here after messing with my code for several hours asking for help. Basically I wanted to make a responsive top menu that also stuck when you scrolled down to its level but for some reason, everything will appear to work but when the window was resized to be smaller than the minimum width to show the full menu, the drop down menu that activates then only works when it was still on top, not once you scrolled past it and made it sticky. I am currently learning html5 and css, but am pretty unfamiliar with javascript, so was trying to take examples I found off websites that allowed you to use their code (basically other tutorial websites) but wasn't having any luck, but have finally got it to work. I just wanted to post it here in case anyone is interested:

html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="files/style01.css">

    <title>This is my title</title>
  </head>

  <body>
    <header>
      <div class="logo">Logo place holder</div>
      <div class="coverimage">Cover Image place holder</div>

      <!-- Top menu is 44px in height -->    
      <div id="topmenu">
        <ul class="topnav" id="myTopnav">
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Safety</a></li>
          <li><a href="#">Contact</a></li>
          <li class="contactright"><a class="contactright" href="#">Email Me: Text@email.com</a></li>
          <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li>
        </ul>
      </div>
    </header>
    <div class="content">
      <a href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">Here</a>
      Test
    </div>

    <script src="files/js/jquery.min.js"></script>
    <script src="files/js/index.js"></script>

  </body>
</html>

The jquery.min.js needs to be there and could be downloaded from here.

css:

body{
    background-color: rgb(240,240,240);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-color: rgb(0,0,0);
    margin: 0;
}

ul.topnav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(60,60,60);
}
ul.topnav li{float: left;}
ul.topnav li a{
    display: inline-block;
    color: rgb(250,250,250);
    text-align: center;
    padding: 2px 16px;
    text-decoration: none;
    transition: 0.2s;
    font-size: 14px;
}
ul.topnav li.contactright{
    float: right;
    font-size: 15px;
    color: rgb(200,200,200);
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    transition: 0.2s;
}
ul.topnav li a:hover {background-color: rgb(100,100,100);}

ul.topnav li.icon {display: none;}

@media screen and (max-width:675px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:675px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

/* This is the class that will be added or removed based on the scroll position */
.fixednav{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.coverimage {color:#777; font-style:italic; margin:10px 0;}
#topmenu {background:#00a; color:#fff; height:40px; line-height:40px; letter-spacing:1px; width:100%; margin-bottom: -44px;}
.content {margin-top:10px; height: 20000px; padding-top: 54px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}

And the index js file I linked to:

// script for the sticky menu
var menu = document.querySelector('#topmenu');
var menuposition = menu.offsetTop;
stickMenu(menuposition);
jQuery(window).scroll(function () {
    stickMenu(menuposition);
});
function stickMenu(menupos) {
    if (jQuery(window).scrollTop() >= menupos) {
        jQuery('#topmenu').addClass('fixednav');
    } else {
        jQuery('#topmenu').removeClass('fixednav');
    }
}

// script for the responsive menu
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

If anyone else found my topic because they had a similar issue, I hope this helps. :-)

Answer 1

Looks like jquery was not working , i added the jquery again to the end of your document before the closing body.

 // script for the sticky menu var menu = document.querySelector('#topmenu'); var menuposition = menu.offsetTop; stickMenu(menuposition); jQuery(window).scroll(function () { stickMenu(menuposition); }); function stickMenu(menupos) { if (jQuery(window).scrollTop() >= menupos) { jQuery('#topmenu').addClass('fixednav'); } else { jQuery('#topmenu').removeClass('fixednav'); } } // script for the responsive menu function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 body{ background-color: rgb(240,240,240); font-family: Georgia, "Times New Roman", Times, serif; font-color: rgb(0,0,0); margin: 0; } ul.topnav{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(60,60,60); } ul.topnav li{float: left;} ul.topnav li a{ display: inline-block; color: rgb(250,250,250); text-align: center; padding: 2px 16px; text-decoration: none; transition: 0.2s; font-size: 14px; } ul.topnav li.contactright{ float: right; font-size: 15px; color: rgb(200,200,200); text-align: center; padding: 0px 16px; text-decoration: none; transition: 0.2s; } ul.topnav li a:hover {background-color: rgb(100,100,100);} ul.topnav li.icon {display: none;} @media screen and (max-width:675px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:675px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } /* This is the class that will be added or removed based on the scroll position */ .fixednav{ position: fixed; top: 0; width: 100%; z-index: 100; } .logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;} .coverimage {color:#777; font-style:italic; margin:10px 0;} #topmenu {background:#00a; color:#fff; height:40px; line-height:40px; letter-spacing:1px; width:100%; margin-bottom: -44px;} .content {margin-top:10px; height: 20000px; padding-top: 54px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;} .menu-padding {padding-top:40px;} .content p {margin-bottom:20px;}

 <body> <header> <div class="logo">Logo place holder</div> <div class="coverimage">Cover Image place holder</div> <!-- Top menu is 44px in height --> <div id="topmenu"> <ul class="topnav" id="myTopnav"> <li><a class="active" href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Safety</a></li> <li><a href="#">Contact</a></li> <li class="contactright"><a class="contactright" href="#">Email Me: Text@email.com</a></li> <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li> </ul> </div> </header> <div class="content"> <a href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">Here</a> Test </div> <script src="files/js/jquery.min.js"></script> <script src="files/js/index.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> </body>

Responsive sticky menu not working after scroll

Question

1 answers

solution1
0 2016-10-02 18:53:26

Responsive sticky menu not working after scroll

Question

1 answers

solution1 0 2016-10-02 18:53:26

solution1
0 2016-10-02 18:53:26