The Bootstrap Navbar is failing to display the menu options once it collapses

I am currently using Bootstrap 4 and have encountered an issue with the navbar. On a large screen, the navbar appears as shown in this image: https://i.sstatic.net/lIKBC.png. However, when the screen size is reduced and the navbar collapses, the menu option does not display upon clicking the menu button: https://i.sstatic.net/2P2zt.png

When on a smaller screen, I expect the menu options to be listed upon clicking the menu button. How can I resolve this problem? Below is my HTML and CSS code:

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap Resize</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
      
   </head>
   <style type="text/css">
    .navbar-custom {
     height: 54px; 
     background-color: #484848;
   }
   </style>

   <body>                 
    <nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a  style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">LOREM</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">LOREM</a>
            </li>
          </ul>
        </div>

      </div>
    </nav>
   </body>
</html>
htmlcssbootstrap-4frontend

Answer №1

It appears that there are a few areas for improvement:

1 - Make sure to include the jQuery plugin before the bootstrap plugin:

...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
...

2 - The closing tags for metatags should be removed as metatags do not require end tags.

Incorrect format:

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

Correct format without </meta>:

<meta name="viewport" content="width=device-width, initial-scale=1">

3 - Delete the height rule height: 54px.

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap Resize</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1" >
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

   </head>
   <style type="text/css">

   .navbar-custom {
     background-color: #484848;
   }

   </style>

   <body>
    <nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a  style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">LOREM</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">LOREM</a>
            </li>
          </ul>
        </div>

      </div>
    </nav>
   </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

Are there methods to create a link that will open an application if it is already installed, or a website if it is not?

Similar Question: How can I check if a URL scheme is supported in JavaScript on iPhone Safari? Let's say my application is called "exapp" and I want to create a link on a website that can open the application if it is installed. If the user agen ...

iphonehtmlios

Unusual behavior exhibited by dynamic code in iframe

When trying to retrieve a dynamic height iframe, I implement the code below. In the <head> area <script language="javascript" type="text/javascript"> function adjustIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight ...

javascriptjqueryhtmlcssiframe

Obtain HTML element from a text snippet

What is the most efficient method for extracting an HTML tag from a string? I am dealing with a string of HTML that includes multiple embed tags containing videos. The number of embed tags in the string can vary. I understand that I could use the followi ...

c#asp.nethtmlstring

Can the text within an li element be accessed using Xpath even with varying attributes?

Instead of directly using: driver.FindElement(By.XPath("//ul[3]/li/ul/li[7]")).Text I am exploring ways to retrieve the text by utilizing Xpath along with different attributes like text(), contains(), and so on. //ul[3]/li/ul/li//[text()='My Data&a ...

htmlseleniumxpathselenium-webdriverwebdriver

Tips for overriding CSS rules marked as !important by a script

I recently implemented a JavaScript plugin from an external service that comes with its own CSS rules. However, these rules are not compatible with my layout as the width needs to be changed from 540 to 700px: #chat-container.bbhorizontal .main .booking { ...

csscss-selectors

What is the process of triggering an email send via a button click in Django?

As a newcomer to Django, I am facing issues accessing the view via ajax code. The code is triggered by a button click and is supposed to send an email. In my view.py file, the code in the 'def error' block should display when there's an erro ...

htmljquerydjango

Tips for Automatically Keeping Bootstrap Dropdown Open When Selecting an Option

My bootstrap dropdown features a select box with specific options that I want to keep visible. However, when I click on it, the drop-down closes unexpectedly. How can I prevent the drop-down from closing when clicking on the select box? Check out this boo ...

csstwitter-bootstrapbootstrap-4

Using regex in PHP to wrap the <ul> tag with <div> is a useful technique

My html snippet looks like this. <ul style="margin-left: 240px;"> <li>One</li> <li>Three <ul> <li>dfdf</li> </ul> </li> <li>dfds</li> </ul> ...

phphtmlregex

Tips for transforming Javascript, CSS, and HTML elements into an engaging interactive PDF or .h5p page

I have developed a unique web application that allows users to place dots on a sitemap and link them to images. The technology stack includes Javascript, CSS, and HTML. phase1 Subscribed users are able to utilize a wide range of features which enable them ...

htmlpdf

Is there a way to assign the scroll event context to `document.body` instead of `window`?

Discovery As I delved into the intricacies of web development, I stumbled upon a curious observation. In a particular MDN page, I noticed that the left and right sidebars had their scrollbars contained within themselves. However, the content block's ...

javascripthtmlscrolldom-events

Steps for recognizing and navigating a hyperlink, and subsequently extracting information from a different webpage using BeautifulSoup

If only I could swiftly extract a title from a webpage, exhibit the title, move on to another page by following a link, acquire the title from that new page, and ultimately showcase the second title. The tasks for steps (1) and (4) are essentially identic ...

pythonhtmlweb-scrapingbeautifulsoupurlopen

HTML Styling Origin Finder - Locate the Source of Your Website's Style

In my ASP.NET project, I am facing an issue with determining the source of a textbox's style. There are multiple style sheets in use on the page, and I need a tool or editor that can pinpoint which styles are being applied to render the textbox. Your ...

asp.nethtml

Pressing the menu button will trigger a function that halts after the third click

As I attempted to implement the functionality of this left menu bar, I encountered a roadblock. The click event on the menu button seems to work fine initially - the left bar appears with the first click and closes as expected with the second click. Howeve ...

javascripthtmlcssloopsaddeventlistener

Downloading multiple files concurrently in Flask

I am currently working on implementing a feature in Flask that allows users to download files from the client side. This feature should support downloading multiple files or just a single file. However, I am facing a challenge in providing the option to d ...

pythonhtmlfileflaskdownload

Tips for creating a responsive CSS component within a q-card while adding content

Utilizing vue and quasar, I have created this component: <template> <q-layout> <q-page-container style="background-color: #e0e5ea;"> <q-page class="column"> <menu-bar></menu-bar> ...

htmlcssvue.jsquasar-frameworkquasar

Recharge the Div

Looking for a solution to refresh the content within a specific div, I have implemented the following code: <script> $(function() { $("#refresh").click(function() { $("#new").load("/new.php") }) }) </script> The issue I am facing is ...

javascripthtml

There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...

javascriptjqueryioscsstwitter

Using FieldSet in ASP.net Forms

Utilizing the FieldSet element in my web application requires me to customize its style. I aim to change the border color to blue and make the legend bold in color. Any guidance on how to achieve this would be greatly appreciated. Thank you in advance. ...

htmlcss

Modifying colors with Jquery

Is it possible to use CSS within JQuery to gradually change the color of a div? Additionally, how can I incorporate a second function into my <div>? Below is the code. I would like the color to revert back to its original state when the mouseout ev ...

jquerycss

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

javascripthtmlcsstwitter-bootstrapjquery-isotope