Having trouble with the toggle button on the Bootstrap 5 navbar?

I am facing an issue with my HTML code where the toggle button does not display properly when I resize the browser screen. Upon clicking on it, the navigation bar items do not show at all. Here is a screenshot of my website

<html>
    <head>
        <title>
            Profile 
        </title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap CSS-->
        <link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
        <!-- W3 CSS-->
        <link rel="stylesheet" href="../css/W3.css">
         <!-- Profile CSS-->
         <link rel="stylesheet" href="../css/accueil.css">
        <!-- Flaticon CSS-->
        <link rel="stylesheet" href="../icons/font/flaticon.css">
        <!--Scripts-->
        <!-- JQuery script-->
        <script src="../js/jQuery.js"></script>
        <!-- Bootstrap script-->
        <script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-md fixed-top">
                <div class="container-fluid">
                    <a class="navbar-brand" href="accueil.html">
                        <h4>LOGO</h4>
                    </a>
                    <!--Collapse button -->
                    <button type="button" class="navbar-toggler" 
                    data-bs-toggle="collapse" data-bs-target="#coll_target"
                    aria-controls="coll_target" aria-expanded="false"
                    aria-label="Toggle Navbar" >
                        <span class="navbar-toggler-icon" ></span>
                    </button>
                    <!--Collapse Div -->
                    <div class="collapse navbar-collapse" id="coll_target">
                        <div class="mx-auto"></div>
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item"><a class="nav-link"><span><i class="flaticon-ringing" style="color: white;"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i class="flaticon-email" style="color: white;"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-down-arrow"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-translation"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i class="flaticon-settings" style="color: white;"></i></span></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
           
    </body>
</html>

javascripthtmljquerycssbootstrap-5

Answer №1

If you're looking to enhance your web development skills, make sure to check out the helpful documentation available at this link.

Assuming you have a basic understanding of CSS and HTML, integrating Bootstrap correctly into your development environment is key. You can either load it remotely or download it for local use.

In a nutshell, your web pages should resemble the structure below:


     <!doctype html>
     <html lang="en">
      <head>
       <!-- Required meta tags -->
        <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
          <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b2bfbfa4a3a4a2b1a090e5fee0fee2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
           <title>Hello, world!</title>
         </head>
          <body>

<!---include navbar components to demonstrate what you need----->

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <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="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096a667b6cfc93ac08f909c90">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5abb5a9">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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

What is the preferred method for accessing nested object properties in React props?

Building upon a previous inquiry - Javascript - How do I access properties of objects nested within other Objects It appears that standard dot notation doesn't suffice for accessing nested object properties within React state/props. In the case of t ...

javascriptreactjs

Is it beneficial to display three.js on a <canvas> rather than a <div>?

I have come across examples in three.js that use: renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } ); This relates to a <canvas></canvas> element. On the contrary, there is another method: rendere ...

javascriptthree.jshtml5-canvasrenderer

Tips for presenting styled HTML content within a dynamic list using HTML and JavaScript

Is there a way to display HTML formatted text within a dynamic list in HTML? I've tried implementing it, but the tags are being displayed instead of the formatted text. Here's an example of the code: <!DOCTYPE html> <html> <body> ...

javascripthtmldomappendchild

The React Query devtools are failing to display

I am currently working on a project using React Query, but for some reason, the DevTools icon is not appearing on my screen. I have checked the console for errors, but there are none. I am following a tutorial on YouTube to help me with this. Here is a sn ...

javascriptreactjsreact-queryreact-state-managementweb-developer-toolbar

When navigating back to the Homepage from another page, React displays the Homepage

Recently, I started learning React and following the Traversy crash course along with an additional video on React router 6+. My route setup looks like this: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' return ( &l ...

javascriptreactjsreact-routerreact-router-dom

Unable to retrieve session information from a different PHP page

I have been searching for solutions here but haven't had any luck so far. I am currently learning HTML and while working on a simple login feature, I have run into some issues. I am using XML as a makeshift "database" and PHP to retrieve the informati ...

phphtmlxmlsessionauthentication

Exploring Node JS Express Thread Clarity

Having recently delved into the world of node js, I've familiarized myself with its architecture. I grasp the concept of the event loop, the main thread (V8 engine thread), and the other threads handled by libuv. When the main thread needs to handle ...

javascriptnode.jsexpress

A guide to implementing v-for with intervals in Quasar carousel components

I need help making my blog summary page more dynamic by using a q-carousel to display 3 blog posts per slide. I want to create an array with all the blog posts and loop through it with v-for to populate each slide dynamically while keeping the pagination l ...

javascriptvue.jsquasar

Alert: Windows Gadget AJAX Security Advisory

I have developed a Windows Gadget that utilizes JQuery to access the oAuth-Service provided by Yammer: (API Documentation) $.ajax({ url: "https://www.yammer.com/oauth/request_token", type: "GET", beforeSend: function (xhr) { xhr.setRe ...

jqueryajaxsecuritywindows-desktop-gadgets

The usage of the enzyme shallow() function combined with the addition of event listeners

A specific component is causing some issues in my application: class ProblematicComponent extends Component { componentDidMount() { this.monitorForClicks(); } monitorForClicks() { this.elementRef.addEventListener('click', () => ...

javascriptreactjsenzyme

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

Gather and consolidate all files into a single file using Node.js / JavaScript

I currently have 3 JSON files located in my project/Folder file1.json { "id":"01", "name":"abc", "subject":[ "subject1":"Maths", "subject2":"Science" ...

javascriptnode.jsjsonnodes

Customizing the attribute of an HTML tag using EJS or jQuery

Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...

javascriptjqueryhtmlexpressejs

PHP script encountering difficulty inserting data into database when AJAX is utilized; functions flawlessly without AJAX

In my "user registration" file, there is a form with the following structure: <form action="" method="POST"> <label for="user" class="control-label">User </label> <input type="text" name="user" class="form-control" id="user" ...

javascriptphpmysqlajax

Troubleshooting responsive navigation bar in VueJs: Why are elements not appearing when ToggleButton is clicked?

I'm developing a VueJs single page application and I'm struggling to implement a responsive NavBar. No matter what I try, it just doesn't seem to work as expected. I've experimented with several solutions, and the closest I have come t ...

javascripthtmlcssvue.jsdom

Update the displayed locations on Google Maps by fetching and displaying marker data

I am able to retrieve and display information from my MySQL table, but I need assistance with refreshing this data every 5 seconds using my current code. The data being shown is not extensive, just about 5 or 8 markers at a time. Below is the code I curren ...

javascriptphpmysqlgoogle-maps

Changing dimensions of cube on stable base

I'm currently working on a project involving a dynamic cube that can be scaled in real time by adjusting its mesh. However, I'm facing a challenge in keeping the cube fixed to the floor while changing its height. Here's a snippet of the code ...

javascriptthree.js

Utilizing jQuery to implement a CSS style with a fading effect, such as FadeIn()

I have a jQuery script that applies a CSS style to an HTML table row when the user clicks on a row link: $(this).closest('tr').css("background-color", "silver"); Is there a way to soften this color change effect, such as by gradually fading in ...

javascriptjquerycss

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

javascripthtmlcssvue.js

Learn how to use the CSS transform-scale() function to scale text independently from its container while maintaining proper alignment

I am currently working on adjusting font sizes to match another one, but I am facing an issue where the container's size is also being affected, resulting in misalignments. I have experimented with different display types (block, inline) and even trie ...

htmlcss