What could be the reason for the nav icon not displaying?

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358465844">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- Own Css -->
  <link rel="stylesheet" href="css/style.css">
  <title>Tropico</title>
</head>
<body>
  <!-- Section - 1 Navigation Starts -->
  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <a href="#" class="navbar-brand"><img src="img/logo.png" alt=""><span>Tropico</span></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a href="#home" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#fruits" class="nav-link">Fruits</a>
          </li>
          <li class="nav-item">
            <a href="#service" class="nav-link">Services</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact us</a>
          </li>
          <button class="nav-item">Get a quote</button>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Section - 1 Navigation End -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabb8bfee5fbe5f9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
</body>
</html>

The display does not show the navigation icon when it goes below 992px due to using navbar-expand-lg in Bootstrap 5.

htmlcssbootstrap-5

Answer №1

It's possible that the source in your img tag is incorrect. If you have an img folder in your root path (as indicated by src="img/logo.png"), try changing it to 

<img src="/img/logo.png" alt="">

If this doesn't fix the issue, refer to HTML file paths

Answer №2

When working with Bootstrap 5.0.2, it's important to make the following adjustments:

  • To display the navigation burger menu icon, add .navbar-light within the <nav> element. This is necessary because the selector in Bootstrap for displaying the icon is 
    .navbar-light .navbar-toggler-icon
    .

An additional issue may arise with the toggle icon interaction. To address this, make the following modifications:

  • Change data-toggle="collapse" to 
    data-bs-toggle="collapse"
  • Update data-target="#navmenu" to 
    data-bs-target="#navmenu"

It's worth noting that while data-target was used in Bootstrap v4, in Bootstrap v5, all instances of data-* have been changed to data-bs-*.

Remember to also incorporate aria-* attributes as outlined in the Bootstrap documentation for improved accessibility :)

Answer №3

Looks like you're missing some important classes

https://i.sstatic.net/J8CtH.gif

Here is a suggestion:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63b3beacaeb7fca2adafcccfcf90c6d0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <!-- Own Css -->
        <link rel="stylesheet" href="css/style.css">
        <title>Tropico</title>
    </head>
    <body>
        <!-- Section - 1 Navigation Starts -->
        <nav class="navbar navbar-expand-sm navbar-light navbar-expand-lg">
            <div class="container">
                <a href="#" class="navbar-brand"><img src="https://i.imgur.com/vhbkAUt.png" width="40" alt=""><span>Tropico</span></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a href="#home" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#fruits" class="nav-link">Fruits</a>
                        </li>
                        <li class="nav-item">
                            <a href="#service" class="nav-link">Services</a>
                        </li>
                        <li class="nav-item">
                            <a href="#contact" class="nav-link">Contact us</a>
                        </li>
                        <button class="nav-item">Get a quote</button>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Section - 1 Navigation End -->
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3040414343494c69693e46484144405255566c67404e424a411309">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    </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

Having trouble getting the product PHP script to upload properly

I have been struggling with a Php script that I created to upload products to my website for over 5 days. Unfortunately, it's not functioning properly and no errors are being displayed. Despite my best efforts, I am unable to identify the error in the ...

phpjqueryhtmlcss

I am having trouble generating a TikTok page link due to the presence of an @ symbol, although all other links are functioning correctly. Can anyone provide a solution to this issue?

I am currently developing a website using primarily HTML within a Blazor application on Visual Studio. I have encountered an issue with the code where the first two buttons function correctly, but there is an error regarding the @ symbol in the TikTok butt ...

htmlhyperlinkblazortiktok

Difficulty in altering the background of an input box

I am attempting to design a textbox that changes its background color to green when the correct answer is submitted, and to red for an incorrect answer. Unfortunately, nothing is happening for either option. document.querySelector('form').addE ...

javascripthtmlbackground-colorrgb

Difficulty with Vue.js updating chart JS label names

I have been working with Vue JS and implementing a chart in my single page application. However, I am encountering difficulties updating the Legend and despite numerous attempts and searches, I am unable to get it to update. Any assistance in correcting my ...

javascripthtmlvue.js

Using JQuery to animate a div tag and automatically hide it after a specific duration

I'm attempting to create an animation where a div tag moves left 300px, hides after 3 seconds, and then repeats the process every 8 seconds. However, my current code only runs the animation once and doesn't repeat the entire process. Below is the ...

jquerycss

Could one harness the power of SO's script for adding color to code within questions?

Similar Question: Syntax highlighting code with Javascript I've observed that Stack Overflow utilizes a script to apply color coding to any code shared in questions and answers, making it resemble how it would appear in an IDE. Is this script pub ...

javascriptjqueryhtmlajax

Is there a way to synchronize the expanded row data with the columns of the main table in Material UI's collapsible table?

I have a feature where, upon clicking the expand icon, a row is expanded. I am looking to align the data of these expanded rows with the columns of the main table. To achieve this, I am utilizing Material UI's collapsible table component! How can I i ...

htmlcssreactjsmaterial-ui

Enable the ability to upload multiple images on a single page using droparea.js

I am currently utilizing droparea js for uploading images. However, I have encountered an issue where if I try to upload an image in one of the upload menus, it ends up changing all four upload menus simultaneously. <div class="col-md-12"> ...

javascriptjqueryhtmlcss

Executing a jQuery function automatically & Invoking a jQuery function using the onClick attribute in an HTML element

Having some issues with jQuery and could use some assistance... Currently, I am trying to have a jQuery function automatically execute when the page loads, as well as when a button is clicked. [Previous Issue] Previously, the jQuery function would automa ...

javascripthtmljquery

Is it possible for Firebug to display CSS comments? This feature would greatly assist in utilizing SASS

Can Firebug display CSS comments? I'm wondering if it can help with debugging when using line numbers from SASS. I haven't been able to find any information on this feature, so any help would be greatly appreciated. ...

csscommentsfirebug

Is there a more intelligent approach to incorporating Bootstrap classes (or classes from another less.css file) into my less file through inheritance?

I am trying to find a more efficient way to integrate bootstrap classes into my less file. Currently, I am doing the following, but it has the disadvantage that not every "subclass" or connected class is inherited for my own control: .BWForm_form-control ...

csstwitter-bootstrap-3visual-studio-2013less

Unable to display content when the button is triggered

I am facing an issue with hiding a div (class="login-form") and displaying it only after clicking the Login button on my HTML page using jQuery. However, despite clicking the button, the login form does not appear. Can anyone help me understand why this ha ...

javascriptjqueryhtmlcssstylus

Calculating the Vertical Size of a Component within Django Template Design

Within a div element with a fixed width, I have a p element with the following CSS properties: height:100px; overflow:hidden; I am looking to implement a functionality where a MORE button is displayed if the text within the paragraph overflows and is hid ...

pythonhtmlcssdjango

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

javascripthtmlcss

Sticky CSS - A guide to making aside elements fill the entire available height

How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this with ...

csscss-positionsticky

Use sed to extract integers from HTML based on various criteria

Before we continue, I must confess: I realize using regex to parse HTML is generally frowned upon, but if Chuck Norris can do it, why can't I? ;) My goal is to extract specific data from this HTML page: http://pastebin.com/unAifctF based on thre ...

htmlbashparsingsed

Personalize the landing page for your IPython notebook

Is it possible to customize the landing page of an iPython notebook server (version 2.3)? By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the ...

htmlcssipythonjupyter-notebook

CSS selector for GTM trigger that is not specific to any particular element

I am attempting to develop a CSS selector that can target the specific entries within the page-top-menu: Header menu - Menu 1 DE #page-top-menu > div > div.menu-wrapper > ul > li.i39.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d ...

csstriggerscss-selectorsgoogle-tag-manager

After the rendering of the HTML, the value of the jQuery input does not change

Here we have a function that loads HTML onto the form class in a file. The quest[q] locates the appropriate HTML template to load from an array of templates. The HTML being loaded contains an input with an id of "p". I am attempting to set the value of th ...

javascriptjqueryhtmlhandlebars.js

Ensure that the text is wrapped properly when implementing innerHTML functionality

Within my Angular 5 application, I am faced with a requirement to display HTML content retrieved from a database. An example of the text stored in the database is: <div><u>Documents and Files</u></div><ul><li>These docu ...

javascriptcssangularinnerhtml