The navigation bar isn't turning into a hamburger menu - using bootstrap and Flask

My mobile responsive navbar is not rendering correctly on smaller screens. Check it out here:

I am using Bootstrap Material Design with Flask and this is the code snippet for my nav-bar:

<!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark purple">
        <div class='container'>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">

            <ul class="navbar-nav">
            {% for href, id, caption in navigation_bar %}

                <li{% if id == active_page %} class="active"{% endif %}>

                <a class="nav-link" href="{{ href|e }}">{{ caption|e }}</a>
                </li>

            {% endfor %}
            </ul>
        </div>
        </div>
    </nav>

I am new to working with bootstrap and unsure what I could be missing. Any suggestions or tips would be greatly appreciated!

Answer №1

You might want to double-check your navbar components for completeness.

One thing to note is that the nav-item class seems to be missing from the li elements.

Additionally, make sure you have included the navbar-toggler in your setup.

To see a functional template, take a look at the example provided below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

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

Adjust focus dynamically on pressing enter in an HTML form

I am currently working on adjusting the functionality of my HTML input form to change focus upon pressing the enter key. I need to trigger the saveValue() function from the input field when the enter key is pressed and then move the focus to the next input ...

What is the best way to ensure uniform container sizes and properly align images within them?

Customize Image Sizes: Is there a way to set a standard container size and adjust image sizes properly without compromising clarity or aesthetics? The images vary in dimensions, so should they be standardized or is there another solution? Code snippet: ...

Positioning an image beneath the navigation bar in Bootstrap and CSS without it getting covered by text

I am having difficulty positioning an image below the navbar without it overlapping with the text in the navbar. No matter what I try in my code, the image remains attached to the bottom of the navbar and won't move to a separate row below it. I hav ...

The height of the division is either inadequate or excessive when set at 100%

After making progress, I hit a roadblock that has me stumped. The issue I'm facing is with the wrapper height setting. If I set it to auto, it stops at the bottom of the content, leaving the background exposed when the content is shorter than the win ...

Challenges with Adjusting Background Opacity in CSS

My text has a white background with an opacity of .3, but it's affecting the foreground due to CSS repositioning. Even though the HTML is in a different division, I struggle with certain aspects of CSS and would appreciate guidance from those more exp ...

Switching Font Family Option for Selection Mat in Angular Material

I'm currently working on changing the font of the options inside mat-select ("In what city were you born", etc). After some experimentation, I found that by setting ViewEncapsulation to none (allowing styles from other files to bleed in), I am able t ...

Struggling to align Bootstrap toasts in the center horizontally

Currently utilizing Bootstrap 4.6.1 (due to compatibility issues with bootstrap-select and newer versions) and endeavoring to center some toasts horizontally within a page using the code below: <div class="d-flex flex-row justify-content-c ...

Discover the process for simulating a browser zoom using JavaScript

Is there a way to control the browser's zoom level using JavaScript? I decided to create my own solution to override the default browser zoom behavior. The current code works fine if starting from a scale of 1, but I'm facing an issue when alrea ...

Table expands to full width

I am facing an issue with a table that has a large number of elements. I would like the table to expand to the full width of the screen, but it slows down significantly when it does so. https://i.sstatic.net/s475I.png However, I have noticed that if I se ...

Learn the steps for accessing and utilizing aria-label text in Google Chrome

Struggling with the aria-label attribute for blind users in Chrome. Can't seem to hear the aria-label text. Any insights on how aria-label behaves in Chrome or if I'm using the wrong approach? If I'm heading in the wrong direction or using ...

Changing the color of the font in your Bootstrap Navbar 3.4.1

Hello, I'm looking to customize the font color of the links in my Bootstrap navbar. I've attempted to apply specific classes to the navbar as suggested in related posts, but so far I've only been successful in changing the font of the navbar ...

The Bootstrap 5 Navbar dropdown is not as responsive as the dropdown showcased in the official documentation

I tried utilizing Bootstrap 5 to implement a dropdown functionality, but unfortunately, the dropdown on my website isn't behaving as expected. Unlike the dropdown in the official Bootstrap documentation, my dropdown remains open at all times even when ...

Create a footer with a centered column orientation

I am currently working on creating a footer with four columns, one of which will display an image while the others will contain useful hyperlinks. This is what I have accomplished so far: http://jsfiddle.net/Lqh5a/ HTML <div id="wrapper"> <div ...

Is Toggleclass malfunctioning?

I have been working on making the 'timelineTile' div open and close, as well as making it close if another one is opened or if the background is clicked. I have successfully implemented the functionality to close the div when another one is click ...

What is the best way to position elements at the top and bottom of a container?

I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container. jQuery(document).ready(function($) { ...

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

Creating a Runescape Tracker: What essentials should I include?

Hello everyone, I am a beginner in the world of programming and I am excited to learn. I have heard that the best way to learn is by working on a project. I have always been interested in creating a Skill Tracker for my clan. Can you offer any advice on wh ...

Tips for resolving issues with dropdown menu placement

Here is the current state of my HTML and CSS code: <div class="header"> <div class="container-fluid"> <div class="row"> <div class="col-1"></div> <div class="col-10"></div> <div class="col-1 dropd ...

Error encountered while loading GitHub Pages resource

Currently, I am facing issues while attempting to host an Angular application with Bootstrap 4 on GitHub Pages using angular-cli-ghpages. The URL I am trying to deploy it at is , but I continuously encounter the following error: Failed to load resource: s ...