The Bootstrap Navbar fails to function properly when viewed on mobile devices

As a newcomer to BOOTSTRAP 5 and web development in general, I am currently working on creating a simple website using it. I have added a navigation bar, but when I switch my browser to mobile mode, the dropdown menu doesn't work properly and all the elements in my navbar disappear. Any assistance on this issue would be greatly appreciated!

<!DOCTYPE html>
    <html>
        <head>
            <title>Hello World!</title>
            <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120e120c115e59485d0d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

            <style type="text/css">
                #jumbotron{
                    background-image: url(bg1.jpg);
                    height: 25rem;
                }

                .center {
                  text-align: center;
                }

                #cardDeck{
                  margin-left: 1rem;
                }

                #logo-space{
                  background-color: blue;
                  width: auto;
                  height: auto;
                }

                #logo{
                  width: 300px;
                  height: 120px;
                  padding: 15px;
                  margin-left: 5rem;
                }
                
                #FMS-BTN{
                    width: 12rem;
                    position: relative;
                    top: 3rem;
                    left: 5rem;
                }
            </style>
        </head>
        
        <body>
            <div id="logo-space" class="row">
              <div class="col">
                <img id="logo" src="img/logo.png" alt="">
              </div>
              <div class="col">
              </div>
              <div class="col">
                <a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
                  <img src="" alt="">Head to FMS</a>
              </div>
            </div>
          
            <div id="nav-area">
              <div class="row">
                <div class="col">

                  <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">
                      
                      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

                      <div class="collapse navbar-collapse" id="navbarText">

                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                          <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">HOME</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">ABOUT US</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">DIVISIONS</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">APPEALS</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">FEED</a>
                          </li>
                        </ul>

                        <span class="navbar-text">
                          <a href="url">APPLY NOW</a>
                        </span>
                      </div>
                    </div>
                  </nav>

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

htmlcssbootstrap-5

Answer №1

To enable the mobile menu functionality, it is essential to include the JavaScript Bundle for Bootstrap. The mobile menu feature relies on JavaScript to function properly.

Here is the code snippet for the JS Bundle:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3afb3ad">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

All you need to do is add this JS dependency to activate the mobile menu:

<!DOCTYPE html>
<html>

<head>
  <title>Hello World!</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272071c001c021f5057465303">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760318041806">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

  <style type="text/css">
    #jumbotron {
      background-image: url(bg1.jpg);
      height: 25rem;
    }
    
    .center {
      text-align: center;
    }
    
    #cardDeck {
      margin-left: 1rem;
    }
    
    #logo-space {
      background-color: blue;
      width: auto;
      height: auto;
    }
    
    #logo {
      width: 300px;
      height: 120px;
      padding: 15px;
      margin-left: 5rem;
    }
    
    #FMS-BTN {
      width: 12rem;
      position: relative;
      top: 3rem;
      left: 5rem;
    }
  </style>
</head>

<body>
  <div id="logo-space" class="row">
    <div class="col">
      <img id="logo" src="img/logo.png" alt="">
    </div>
    <div class="col">
    </div>
    <div class="col">
      <a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
        <img src="" alt="">Head to FMS</a>
    </div>
  </div>

  <div id="nav-area">
    <div class="row">
      <div class="col">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

            <div class="collapse navbar-collapse" id="navbarText">

              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">HOME</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">ABOUT US</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">DIVISIONS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">APPEALS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">FEED</a>
                </li>
              </ul>

              <span class="navbar-text">
                          <a href="url">APPLY NOW</a>
                        </span>
            </div>
          </div>
        </nav>

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

</html>

Answer №2

To make it work, all you have to do is switch out the class navbar-expand-lg with navbar-expand-sm. I tried this and it worked perfectly for me.

Answer №3

element, CSS Media Queries come in handy for determining the actions to take depending on the screen size. For instance, adjusting the navigation bar size to fit different screen sizes is achievable with this method. 
@media (max-width: 600px) { 

*Consider this as a reference point for phones, though further pixel calculations may be necessary*

}

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

Leverage PHP to retrieve information from a JSON file and integrate it into a dropdown menu on an HTML

I've been given a task to develop a PHP routine that will extract the ISO code and name from a geojson file for use in a dropdown list of countries on a website. This is completely new to me and I'm finding it difficult to understand the documen ...

phphtmlleafletgeojson

Encase a group of div elements with identical styling

Looking for a solution on how to programmatically wrap a set of divs with a parent div based on a certain class match. Any suggestions or ideas on how to achieve this? ...

jqueryhtmlcss

Utilizing personalized markers to encapsulate correct HTML elements

Recently, I came across a discussion on the implications of using custom tags in HTML. After reading about it, I have decided to avoid using custom tags in order to adhere to standards and ensure that search engine bots can properly read my code. However, ...

htmltags

What is the process for creating instant notifications using AJAX, PHP, and MySQL?

I am looking to implement real-time notifications on my website and have already set up the notification bar: <div class="alert alert-info alert-with-icon" data-notify="container"> <button type="button" aria-hidden="true" class="close"> ...

javascriptphphtmlmysqlajax

Background image for input button in Internet Explorer 6

Can you create a custom background image for the input type="button" in Internet Explorer 6? ...

htmlcssinternet-explorercross-browser

Tips for creating a scrollable modal with a form embedded within

Is there a way to enable scrolling in a modal that contains a form? <div class="modal fade" id="assignModal" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel&q ...

htmlbootstrap-4

What is causing my link to be clickable beyond the designated linked text area?

https://i.sstatic.net/RZPaw.png Displayed above is the current image. By clicking anywhere inside the black border, you will be directed to the provided URL. However, I specifically want only the text "RANKINGS" to be clickable. Here is the HTML code: &l ...

htmlcsshyperlink

Live notification application using node.js

I am looking to create a recipe maker webapp for practice purposes. This webapp will consist of 2 main pages: the index page and the recipes page. On the "index" page, users can create their own recipes. On the "recipes" page, users can view a table ...

javascripthtmlnode.jsexpresssocket.io

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistent ...

javascriptjqueryhtmlcssangularjs

The innerHTML of the p tag remains unaffected when using document.getElementsById("")

HTML {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" /> <script> function openNav() { document.getElementById("mySidenav").style.width = "20%"; document.getElementById("main" ...

javascripthtmlcssdjangofor-loop

Ways to prevent onMouseDown from triggering when the element is exclusively clicked?

I'm currently working on developing a game where units (svg elements) are controlled using React. In this game, the units should be draggable, and clicking on a unit should open a form. However, when I click on the unit, only the mousedown event is t ...

javascripthtmlreactjs

Does Less undergo a compilation process in a single pass?

Does Less execute a single pass on the files, or does it perform multiple passes? I am particularly worried about what will happen if I include another file that redefines variables and mixins. Will the generated output use the original values, or will it ...

cssless

Issue with Radio Button Value Submission in Angular 6 and Laravel 5.5

I developed a CRUD application utilizing Angular and Laravel 5.5. Within this application, I included three radio buttons, but encountered an error when trying to retrieve their values... A type error occurred indicating it was unable to read the data t ...

htmlangularlaraveltypescript

The display and concealment of a div will shift positions based on the sequence in which its associated buttons are clicked

I am in need of assistance with coding (I am still learning, so please excuse any syntax errors). What I am trying to achieve is having two buttons (button A and button B) that can toggle the visibility of their respective divs (div A and div B), which sh ...

javascripthtmlcssshow-hide

Adjust the dimensions of the text area to modify its height and width

Can someone help me adjust the width and height of the <textarea> tag in HTML so that it only has two lines (rows)? Right now, it's only displaying one line. Any suggestions on how to solve this issue? Even when I try changing the width to 1000 ...

htmlcssasp.nettwitter-bootstraptextarea

Refreshing the webpage section without requiring a full page reload

I am currently working on a Django website and I have been trying to update a specific section of the webpage without refreshing the entire page. However, most solutions I found online didn't work for me because the part I want to update is actually i ...

javascriptjqueryhtmlajaxdjango

Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...

css

Differentiating CSS Styles for Odd and Even Table Elements

I am trying to implement a style where every other row in my table (myrow) has a different background color. However, currently it is only showing the color specified for odd rows. .myrow, .myrow:nth-of-type(odd) + .myrow:nth-of-type(even) ~ .myrow: ...

htmlcss

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

javascripthtmlcssreactjssvg

The FontAwesome icon is not showing up on this particular view, but it displays correctly on a

I'm facing a strange issue: one of my FontAwesome icons is not appearing on the view, even though all the other icons are working fine. I've been trying to figure out why. <a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add ...

htmlcsstwitter-bootstrapfont-awesome