What steps can I take to ensure that my navbar menu is responsive on mobile devices?

I'm facing some challenges with my school project website as the menu navbar is not mobile responsive. I need help to fix this issue. The website is built using Bootstrap 3 and below is a snippet of my code:

$(document).ready({
  $('.dropdown-toggle').dropdown() 
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>


      </div>
      <div class="main" id="section1">
      <div class="collapse navbar-collapse" id="myNavbar" >
          <ul class="nav navbar-nav">
              <li><a href="index.html">Home</a></li>
                  <li class="dropdown">
            <a href="Comics.html" data-toggle="dropdown" class="dropdown-toggle">Marvel<b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="#sp">Spiderman</a></li>
                <li><a href="#im">Iron man</a></li>
                <li><a href="#am">Captain America</a></li>
              </ul>

              <li class="dropdown">
            <a href="Comics.html" data-toggle="dropdown" class="dropdown-toggle">DC<b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="#flash">The Flash</a></li>
                <li><a href="#aq">Aquaman</a></li>

              </ul>


                <li class="dropdown">
            <a href="Comics.html" data-toggle="dropdown" class="dropdown-toggle">Books<b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="HarryPotter.html">Harry Potter</a></li>
                <li><a href="OneShot.html">One shot</a></li>
                <li><a href="MrMercedes.html">Mr.Mercedes</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="" data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="Education.html">Education</a></li>
                <li><a href="Comics.html">Comics</a></li>
                </ul></li>
                 <li><a href="#com">Interesting Comics</a></li>
            </div></div>
</ul></div></nav>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
htmlcss

Answer №1

Designing a Mobile-Friendly Navigation Menu

  1. Step 1) Implement the HTML:

Illustration

<!-- Incorporate an icon library for displaying a burger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <!-- Navigation links (initially hidden) -->
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
  1. Step 2) Style with CSS:

Example

/* Customize the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Design navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Design the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Apply grey background on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}
  1. Step 3) Include JavaScript:

Sample

/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

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

Achieving a transparent background in WebGLRender: A guide

I've been experimenting with placing objects in front of CSS3DObjects using the THREE.NoBlending hack. However, in the latest revisions (tested on r65 and r66), I only see the black plane without the CSS3DObject. Here is a small example I created: in ...

javascripthtmlgraphicsthree.js

The rotated div is positioned offset from the top based on its left position

I am having trouble determining the offset top position based on a left offset of 50px. Can anyone help with this calculation? ...

javascriptjqueryhtmlpositionphysics

Position a variable-height block to the bottom right corner of another element with a dynamic height

Can a block of text with an unknown height be aligned to the bottom right of a parent element with an unknown height, using only CSS? I have tried using flexbox, float, and absolute positioning, but haven't been able to find a solution. There is an a ...

htmlcss

What is the best way to showcase data from an Excel spreadsheet on a website: JavaScript or PHP with MySQL?

I'm currently in the process of developing a website and I want to integrate data from an excel sheet into it. Here's the format of the excel sheet: Each row represents an 'item', with each column containing specific properties relate ...

javascriptphphtmlmysqlexcel

Optimizing mobile responsiveness for a portfolio landing page

Seeking advice on optimizing my site for mobile view. While the wide-screen monitor display is fine, issues arise when the browser size is reduced, causing sections to appear messy in mobile view. Any suggestions or tips would be greatly appreciated! Visi ...

htmlcsswebportfolio

Unable to See Success Notification on First Attempt

I am facing an issue with displaying a message when adding a new record. The first time I add a record, the message shows up correctly. However, if I try to add another record, the message does not appear even though the record is added successfully. Here ...

javascripthtmljquery

Floating Crosshair within Div - Limited to Container

I'm attempting to implement a crosshair-style cursor effect on a div that houses a D3 Datamap. I've managed to achieve this using jQuery, but the crosshairs appear to extend beyond the boundaries of their parent div on the bottom and right sides, ...

css

Unable to adjust the main-container height in Bootstrap to 100%

I'm struggling to set the height of my .main-container to 100%. When I try to do that, the height ends up being too high. Here is a screenshot for reference: enter image description here .main-container { height: 94vh; } Here is some of my code ...

htmlcssbootstrap-5

Angular animated element persisting despite being told to disappear

I'm facing an issue that I need help with. Here's the link to the problem: http://jsfiddle.net/mhff6u7y/3/ The problem arises when I have an array of items that are repeated and filtered. Sometimes, I animate one of those items. The issue occurs ...

javascriptcssangularjsanimation

Blurry oval box shadows in CSS are not visually appealing

I'm working on a school project that involves replicating a website. I'm trying to achieve a shadow effect under text in an oval shape, but so far my attempts have just resulted in a blurry rectangle. Here is what I have currently: Click here A ...

htmlcss

What could be causing my Bootstrap navbar menu item to move to the line beneath it when there is centered text?

I've implemented a basic Bootstrap navbar from the example provided on the Bootstrap website at . However, when I tried to add custom text to the center of the navbar, it caused the "Contact Us" menu item to break onto two lines instead of staying on ...

htmlnavbarbootstrap-5

Submitting a form into a database with the help of AJAX within a looping structure

Trying to input values into the database using AJAX. The rows are generated in a loop from the database, with each row containing a button column. Clicking on the button submits the values to the database successfully. The issue is that it only inserts va ...

javascriptphphtmlajax

What is the process for choosing a particular input element based on its size and type?

Among my pair of sets containing input type=text elements, each group is uniquely styled through CSS. In the first set, the length adjusts based on CSS using the width property. Conversely, in the second set, the size attribute determines the length of the ...

htmlcss

HTML - Transforming JSON data into a table

I'm having trouble converting JSON data into a table format. Although everything seems to be in order, I am unable to view the values on my table. Here is the code I am using to convert JSON to a table: $(function() { var my_data = &ap ...

javascriptjqueryhtmljsonajax

Styles for Tab Alignment

.tabs { position: relative; margin: 20px auto; width: 1500px; } .tabs input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filt ...

htmlcsstabs

Bootstrap 4 tabs function perfectly in pairs, but encounter issues when there are three of them

Having trouble with bootstrap4 tabs not working properly? They function well with 2 tabs using the code below: <div class="row"> <div class="col-12"> <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist"> ...

javascripthtmlcssbootstrap-4

Is HTML5 Device Orientation the answer to a dependable compass system?

I am currently developing a project for mobile web that requires access to the compass direction of the user's device. At the moment, my code is quite basic, but here is what I have: var updateDirection = function (evt) { $("#dire ...

javascripthtmlcross-platformcompass-geolocationw3c-geolocation

Setting a global variable to control the visibility of the primary Navigation Menu

Implementing a log-in screen in my Angular app has presented me with the challenge of hiding the main navigation bar while the log-in screen is active. Once the user successfully logs in, I need to display the main nav again. Currently, the main nav is p ...

javascripthtmlcssangularjs

The issue with background-repeat not functioning correctly

I have created a basic HTML webpage with an image displayed as a header. However, I am encountering an issue where the image is not repeating. When I specify the width to be 100%, the td (side) disappears completely. If I remove the width attribute from b ...

htmlcss

Styling a select drop-down menu with CSS to show a button in Chrome and Webkit browsers

On my HTML page, I have a basic drop down menu set up like this: <select name="menu" class="menu"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> ...

cssgoogle-chromebuttondrop-down-menuwebkit