What is the best way to navigate a static dual navigation bar?

I'm currently working with two fixed and responsive navbars. Below is the code I'm using:

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;
}

/* More CSS styles... */


<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>
    
    <!-- More navigation items -->

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

  <!-- Second navbar -->
  <div class="secondnav">
</div>

</div>
</body>
</html>

However, there's an issue when the window is resized causing the navbar to become responsive. When clicking the menu button, it prevents scrolling through the menus due to the number of items in the navbar. How can this be resolved without suggesting other methods? The goal is to find a solution within this existing code structure.
Thank you in advance!

javascripthtmlcss

Answer №1

If you want to customize the appearance of your navigation bar in a responsive design, you can use the following CSS:

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
    max-height: 75vh; /* Adjust height as needed */
    overflow-y: scroll; /* Enable scrolling */
  }

To hide the scrollbar on smaller screens, include the following CSS:

.topnav.responsive::-webkit-scrollbar {
  width: 0px;  /* Remove scrollbar space */
  background: transparent;  /* Make scrollbar invisible */
}


function toggleMenu() {
  var menu = document.getElementById("myTopnav");
  if (menu.className === "topnav") {
    menu.className += " responsive";
  } else {
    menu.className = "topnav";
  }
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.outer {
  position: fixed;
  top: 0;
  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; /* Adjust height as needed */
    overflow-y: scroll; /* Enable scrolling */
  }
  .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="toggleMenu()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
  <div class="secondnav">
</div>

</div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

cssseleniumscreenshotinternregression-testing

Prevent a dynamically generated text input from being used if it exceeds a specific character limit in VUE.JS

I am currently working on a Vue template that dynamically creates Bootstrap text inputs. The goal is to allow the user to retrieve the values onSubmit from these inputs. One requirement I have is to disable an input if the length of the text exceeds 10 ch ...

javascriptvue.jsvalidationinput

What is the most efficient way to use jQuery to retrieve the count of tags associated with a variable

I am trying to filter my data retrieved from ajax using a function. Here is the initial code: var csvf = data.filter(function (el) { return ['TRUCK_CPX'].indexOf(el.TAG) >= 0 && ['CA5533'].indexOf(el.Chave) >= 0 }); Now ...

javascriptjquery

Tips for creating responsive text within a hero image

I'm exploring the world of creating responsive websites using Bootstrap, a new venture for me. One challenge I've encountered is trying to create a hero image with text positioned perfectly in the center. Despite my efforts, the text does not adj ...

htmlcssresponsive-designbootstrap-5

Sequential queuing of transitions in CSS3

Is it possible to queue CSS transitions with the same properties? My goal is to translate an element to a specific position (with a transition duration of 0) before translating it again. For example, in this mockup, clicking "move" should move the box 100 ...

javascriptjqueryhtmlcss

Removing focus in Meterial-UI [Select] component when clicked outside: Techniques and solutions

Looking to create a simple multiple select feature with Material-UI's Select component. One issue I have encountered is that when deselecting an option or clicking outside the dropdown, the label remains focused until clicked on again or another compo ...

javascripthtmlcssreactjsmaterial-ui

Ways to initiate a flip motion

Looking for a way to create a flip image effect when clicked by the user. Here is the code I have so far: let img = document.querySelector('img') let div; let click = 0; img.onclick=function(){ console.log(click) if(click %2 ==0){ d ...

javascripthtmlcss

Exploring TypeScript: Optional Sub-Properties

I've been exploring ways to create a type-alias with properties like "answer" that I came across in this post by another user (Typescript interface optional properties depending on other property). Here's an example: type Sample = { key1: true, ...

javascripttypescript

CSS tricks: Make triangles stand out with unique hover effects

I find myself in a bit of a conundrum! I want to incorporate cursor: pointer into my CSS, but the issue is that it's for a triangle shape. If I were to use the following code: #triangleholder { width: 100px; height: 100px ...

htmlcsscss-shapes

The art of jQuery: Effortlessly animate the deletion of a CSS property

When using jQuery, I often "collapse" certain DOM elements by decreasing their width to 0px and fading them out. Here is an example: $(".slideoutmenu").animate({ width: 0, opacity: 0}, function() { $(this).hide(); }); The widths of these elements can var ...

jquerycss

Issue: ui-route failing to function properly when the href attribute is utilized

I am currently working on implementing ui-route to manage the states of my app while focusing on URL navigation. My goal is to enable users to simply click on a link and be directed to the state associated with the specific URL. After following an In-Dep ...

javascriptangularjsangular-ui-router

Verify the email address for accuracy and display an error message beneath the email input field if necessary

Verify email address format and display an error message below the email input field if it is invalid function validateEmail() { var email = document.getElementById('email').value; var pattern = /^([A-Za-z0-9_\-\.])+\@([A- ...

javascripthtmlvalidationemail

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

csstwitter-bootstraphtml

Experience seamless page transitions reminiscent of the fluid animations found on Medium.com

I'm currently investigating the animation used by Medium when you click on the bottom button to load the next article. If you want to see it in action, please visit a Medium article, scroll to the bottom, and click to navigate to the next article. W ...

javascriptajaxjqueryanimation

Trouble with displaying events on Angular UI-Calendar

I've been working with Angular UI Calendar and following the steps outlined on their website: http://angular-ui.github.io/ui-calendar/ Despite implementing everything correctly, I'm facing an issue where the events fetched from my API are not s ...

javascriptjqueryangularjstwitter-bootstraphttp

What is the process for creating a sense of distance within a sphere using three.js?

I have a three.js sphere with a textured interior and the camera positioned at the center of it. My goal is to make the texture appear much farther away than it currently does. I attempted to incrementally increase the radius from 4,000 to 180,000, making ...

javascriptthree.js

Creating a single-level menu with Bootstrap using nested angular ng-repeat

I am currently working on developing a single level menu using bootstrap and angularJS. The menu is successfully functioning with JavaScript and HTML when the <li> element is dynamically created. Now, I am attempting to integrate AngularJS into the ...

htmltwitter-bootstrapangularjs

Is it possible to retrieve a CSV file from a website by simply clicking a button, without relying on RSelenium in R?

To access the link, simply click here: Once on the page, locate and click the "Exportar lista completa de Fundos em CSV" button to initiate the file download process. I encountered challenges when trying to read the page using R, but eventually succeeded ...

htmlrweb-scrapingdata-import

acquire information using ajax in conjunction with jquery

I am currently working with the following code: <div data-role="content"> <div data-role="content"> <form id="registerForm" action="/register" method="post" data-ajax="false" class="ui-body ui-body-a ui-corner-al ...

javascriptjqueryhtmlajaxjsp

How can I use CSS to change the background color of a fixed navbar when scrolling?

Is it possible to use only CSS to alter the background color of a fixed navbar once the user has scrolled past a specific point vertically? I am curious if this can be accomplished in CSS by targeting the ID of another element, or possibly its height? Alt ...

htmlcss