Exploring the Collapse and Dropdown features in Bootstrap 5 Navbar

Struggling with my navbar on Bootstrap 5 - the collapse feature isn't working after expanding, and the dropdown list fails to drop down.

<!-- Using Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9f849b8499">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Navbar code -->
<nav class="navbar navbar-expand-md  bg-light sticky-top">
  <div class="container-fluid ">
    <a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Delivery</a></li>
            <li>
              <a class="dropdown-item" href="#">Event Planning</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

htmlcsstwitter-bootstrapnavbarbootstrap-5

Answer №1

Bootstrap components often rely on JavaScript for their functionality, such as navbars and dropdowns. I have included the necessary source code for both font-awesome and Bootstrap JS.

For more information, you can visit Bootstrap 5 Introduction.

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202776c726c70">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e958b9589">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<nav class="navbar navbar-expand-md  bg-light sticky-top">
  <div class="container-fluid ">
    <a class="navbar-brand" href="#"><img class="" width="100px" src="icons/cake/Asset 4.png"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="#">SERVICES</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Delivery</a></li>
            <li>
              <a class="dropdown-item" href="#">Event Planning</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><button class="btn btn-danger">ORDER ONLINE</button></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

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

How to implement responsive CSS in Laravel 4

It has come to my attention that in Laravel 4, you can load CSS and scripts using the following method: {{ HTML::style('css/style.css'); }} Which will result in: <link media="all" type="text/css" rel="stylesheet" href="http://localhost/cupc ...

csslaravellaravel-4

Text transitions in a gentle fade effect, appearing and disappearing with each change

I want to create a smooth fade in and out effect for the text within a div when it changes or hides. After researching on Google and Stack Overflow, I found that most solutions involve adding a 'hide' CSS class and toggling it with a custom func ...

javascriptcss

Tips for repositioning the window when linking to a different section of a website

As a beginner in HTML and CSS, I am currently working on adding a navigation bar to my one-page website. I want the navigation bar to smoothly guide users to different sections of the page when they click on a link. To achieve this, I am using anchors and ...

htmlcsshyperlink

Introduction to Grid Layout Using Bootstrap - Rows

Encountering an issue with the vertical alignment of items in the code snippet below when using Bootstrap 4. Initially, the items are stacked vertically, but they align horizontally when either the "row" or "row align-items-start" classes are applied. &l ...

htmlcsstwitter-bootstrapbootstrap-4

As soon as I hover over my icon to enlarge it, I notice that my entire page starts to

Whenever I hover over my icon, the font size increases causing the div to expand slightly and move the page. This doesn't look great. How can I prevent the div from resizing when hovering over the icon? Here's my code: <div className="bg- ...

htmlcssreactjsreact-nativesass

Make the background image come to life by animating it from the bottom to the top in

Upon landing on a page, I aim for the background image to initially focus on the bottom and then pan up to the top before returning back down in a continuous loop. The code I have set up is as follows: <body> <div id="container"></div&g ...

jqueryhtmlcssjquery-animate

Reposition DIV elements using only CSS styling

I'm attempting to switch the positions of two divs for responsive design (the website appearance changes based on browser width, ideal for mobile). Currently, my setup looks like this: <div id="first_div"></div> <div id="second_div"&g ...

cssresponsive-design

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image

I'm curious why the button appears grey in IE and turns blue on hover, rather than starting off blue and becoming darker blue when hovered over. I've managed to make it work in other browsers, but I'm struggling with the code for IE. Thank ...

htmlcssinternet-explorer

The standard bootstrap navbar does not automatically create spacing for content below it

Hey there everyone, I’m facing an issue with my responsive bootstrap menu. When I click the toggle button to open the dropdown menu, it doesn’t push the other content down like it should. Instead, it just overlaps the content. I’ve been trying to sol ...

htmlcsstwitter-bootstrapdrop-down-menunavigation

Incorporating AngularJS into your current JavaScript code base

We have a JavaScipt project underway that could greatly benefit from incorporating AngularJS. However, due to the size of the project, completely rewriting it in Angular is not feasible. Does anyone have any suggestions or tips on how to integrate Angula ...

angularjshtml

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll

I'm having trouble keeping a Google Map div fixed on the screen while allowing my background, consisting of multiple scrolling divs with content inside, to scroll as normal. My attempt to wrap the map div in another fixed div resulted in the map disa ...

htmlcss

Discovering nested elements in Python through Selenium

Looking to create a function that can extract elements from any level of nesting in HTML that contain the word 'products' in their text, regardless of case sensitivity. Below is the function in question: def __find_elements(driver): return d ...

pythonhtmlselenium-webdrivernestedrecursive-descent

Copy the style of a chosen element and apply it to another element

One of the challenges I'm facing involves a dynamic span element that changes based on color selection: <span class="color checked" style="background-color: #ff0000">Red</span> In addition, I have an image element wit ...

javascripthtmlcss

Why is my image being stretched by flexbox instead of maintaining its aspect ratio?

One interesting aspect of Flexbox is how it handles image resizing. When you resize the width of an image within a flex container, the height does not adjust proportionally. This causes the image to appear stretched. div { display: flex; flex-wrap: ...

htmlcssflexbox

What is the recommended alternative for the outdated or non-standard "align" element in use?

Here is the code I am working with in HTML: <td align="center"> After running ReSharper in Visual Studio 2008, I received this error message: "Element 'align' is obsolete or nonstandard" Can someone please advise on the correct replac ...

htmlcsscenteralignment

showing sections that collapse next to each other

I am currently designing a portfolio website using HTML, CSS, and vanilla JavaScript. I have implemented collapsing sections that expand when clicked on. However, the buttons for these sections are stacked vertically and I want to place them side by side. ...

javascripthtmlcss

Customize Zurb Foundation: Applying styles to specific child elements based on current screen size (large, medium, small)

For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...

csszurb-foundationcss-selectorsdescendant

4 Bootstrap card crops

How can I disable the cropping of Bootstrap cards inside a card-columns block? Check out this screenshot: <div class="card-columns"> <div class="card"> <div class="card-header"><a href="/cdn-cgi/l/email-protection" class="__cf ...

twitter-bootstraptwitter-bootstrap-4bootstrap-4

Styling with CSS using only numerical values

My website features a section that states "Weekdays 10:00 ~ 18:00 /*linebreak/ Saturdays 10:00 ~ 13:30" I am looking to format only the numerical values in the font "Courier New," specifically the "10:00 ~ 18:00" and "10:00 ~ 13:30" sections. The remainin ...

csscss-selectors

Flexbox mystery: How come the entire div isn't displayed when the element below it is hidden?

I am in need of a versatile column layout where multiple widgets are stacked vertically, adjusting their size dynamically. Each widget consists of a title and scrollable content. The last widget should have the ability to collapse when its title is clicked ...

cssflexbox