How to scroll a fixed double navbar?

Question

So i have this two navbars which are fixed an responsive. Here is my code:

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

 body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .outer { position: fixed; top: 0px; widtH: 100%; } .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; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {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; } } .secondnav { background:red; width:100%; height:42px; }

 <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="outer"> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#help">Help</a> <a href="#terms">Terms</a> <a href="#privacy">Privacy</a> <a href="#cookies">Cookies</a> <a href="#activitylog">Activity Log</a> <a href="#events">Events</a> <a href="#settings">Settings</a> <a href="#notifications">Notifications</a> <a href="#friendrequest">Friend Requests</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div class="secondnav"> </div> </div> </body> </html>

The problem is that when the window is resized and the navbar becomes responsive and i click the menu button, i can't scroll through the menus as there are many items in the navbar. How to fix this? Please don't suggest other methods. Please try to make it possible using this code.
And thanks in advance!

Answer 1

You can add following CSS:

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
    max-height: 75vh; /* Set to the hegith you want to use */
    overflow-y: scroll; /* Enable scroll */
  }

And if you don't want to show the scroll bar, just add:

  .topnav.responsive::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
  }

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

 body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .outer { position: fixed; top: 0px; widtH: 100%; } .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; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; max-height: 75vh; /* Set to the hegith you want to use */ overflow-y: scroll; /* Enable scroll */ } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .secondnav { background:red; width:100%; height:42px; }

 <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="outer"> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#help">Help</a> <a href="#terms">Terms</a> <a href="#privacy">Privacy</a> <a href="#cookies">Cookies</a> <a href="#activitylog">Activity Log</a> <a href="#events">Events</a> <a href="#settings">Settings</a> <a href="#notifications">Notifications</a> <a href="#friendrequest">Friend Requests</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div class="secondnav"> </div> </div> </body> </html>

How to scroll a fixed double navbar?

Question

1 answers

solution1
0 ACCPTED 2019-01-10 17:18:05

How to scroll a fixed double navbar?

Question

1 answers

solution1 0 ACCPTED 2019-01-10 17:18:05

solution1
0 ACCPTED 2019-01-10 17:18:05