Creating a multi-column mobile menu using Bootstrap5

My bootstrap navbar collapses into a dropdown menu on smaller devices, but the default vertical list of items takes up too much space. I am looking to group these items into two columns as shown in this drawing:

https://i.sstatic.net/qZR3j.png

<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Item 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Item 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Item 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Item 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Item 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Item 6</a>
              </li>
        
            </ul>
          </div>
        </div>
      </nav>

Check out my CodeSandbox code here

I attempted to group items using 

<div class="col-sm-4"> [three items] </div>
, however, it only affected the normal navbar and not the hamburger menu. I couldn't find a solution that applied specifically to hamburgers. I'm open to using JS if necessary, but ideally, I want the standard navbar functionality preserved on larger devices without any modifications - the grouped columns should only appear on the hamburger menu.

htmlcsstwitter-bootstrapbootstrap-5hamburger-menu

Answer №1

The navbar's content has the potential to be dynamic, offering various ways to display two columns within the menu.

To demonstrate the options, I utilized a row container and columns as a simple solution. You can even include a divider for mobile devices, as shown in the provided example.

I trust this explanation proves helpful in addressing your query.

Here is one method to achieve this (codepen):

<div class="collapse navbar-collapse" id="navbarNav">
  <div class="row">
    <div class="col">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Item 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 6</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Item 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 6</a>
        </li>

      </ul>
    </div>
  </div>

</div>

Another approach involves enclosing the <ul> lists within a flex div to display the menu in two columns (codepen). I believe this is a more effective solution, but wanted to provide you with multiple possibilities.

Answer №2

Utilize the grid system within the navbar-nav using the row-cols-* classes to define the number of columns. This simplifies column organization in your code.


     <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav flex-row row g-0 row-cols-2 row-cols-lg-6">
                <li class="nav-item col">
                    <a class="nav-link active" aria-current="page" href="#">Item 1</a>
                </li>
                <li class="nav-item col">
                    <a class="nav-link" href="#">Item 2</a>
                </li>
                <li class="nav-item col">
                    <a class="nav-link" href="#">Item 3</a>
                </li>
                <li class="nav-item col">
                    <a class="nav-link" href="#">Item 4</a>
                </li>
                <li class="nav-item col">
                    <a class="nav-link" href="#">Item 5</a>
                </li>
                <li class="nav-item col">
                    <a class="nav-link" href="#">Item 6</a>
                </li>
           </ul>
     </div>

Experience the responsive demo here

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

Configuring Google Maps API (including charts) for maximum height of 100%

I am having trouble getting my map to display at 100% height using the Google Maps API. I've encountered similar issues in the past with the Google Charts API as well. From what I've gathered, it seems like setting the height of the html and bod ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

What is the best way to apply fill to SVG using Tailwind CSS?

I tried using the code provided, but unfortunately, I was unable to Override the fill. The issue seems to have been resolved, but can someone help me achieve this using tailwind CSS? <div className=""> <svg className="text- ...

cssnext.jstailwind-csstailwind-in-js

What is the method to create <li></li> elements with the class of col-lg-4 so that their width is based solely on the content inside, rather than spanning across all 4 columns?

I am currently facing an issue with a list of images that have the class col-lg-4 and a border around the <li></li> element. However, when they are placed in a container-fluid, they stretch to the full width of 4 columns, causing the border to ...

htmlflexboxbootstrap-4

Is there a PHP function that can strip out line breaks and HTML entities from a given string?

I currently have descriptions stored in a database that are formatted using HTML tags as shown below: &#149; Description bullet blah blah <br /> &#149; Description bullet blah blah <br /> &#149; Description bullet blah blah My pla ...

phphtml

clicking the anchor will toggle the div

Here is the HTML code that I am working with: <? while($arr as $data) { ?> <td> <div> <a href="javascript:void(0)" class="status <?= $data['SUGGESTION_CD'] ?>"> <img src="images/activate.gif" /> &l ...

jqueryhtml

Issue with Cascading Dropdowns in jQuery

I am currently experiencing issues with a piece of code on my website (also accessible via this link). The code consists of 2 select fields that should display different data based on the selection made. However, I have identified 2 bugs within the code. ...

javascriptjqueryhtml

Extract the identifier of the class and subsequently pass it to the PHP script

How do I retrieve the id of a dynamically created class within a while loop, where the id corresponds to the user who posted it, and then send this id to PHP? Here's exactly what I'm trying to achieve: HTML: <div class='lol' id=&a ...

phpjqueryhtmlajaxpost

Combining data from two separate MySQL queries to create a personalized user feed

I am working on creating a unique personalized feed system for a website using NodeJS+MySQL. Currently, I am fetching posts based on specific tags using the following query: SELECT column1, column2... FROM table WHERE tags = users_tags ORDER BY relevanc ...

javascripthtmlmysqlnode.js

CSS3 Animation for Marquee Image

I'm struggling to create a CSS3 animation for an image. My goal is to have the image continuously wrap around and scroll across the page, but I can't get it to work as intended. Here's a simple snippet of my HTML: <div id="space" class=" ...

htmlcssmarquee

The dominance of CSS specificity in favor of the flex property compared to flex-basis

Is there a specificity among CSS properties that affects how styles are applied? I've been experimenting with flexbox and encountered an interesting scenario: The second selector .flex-basis-5 is added dynamically via JavaScript based on certain con ...

htmlcssflexboxcss-specificity

Ensure that the contents of the upper and lower divs are appropriately aligned, while maintaining the centered positioning of the

As a complete beginner in the world of HTML and CSS, I am facing a challenge with my code. Here's the HTML snippet: <section class="instructions"> <div class="row"> <div class="instructions-col" ...

htmlcss

Uniform widths of table cells when resizing and overflowing

I am working with a table that looks like the one below: +-----+-----+-----+-----+-----+-----+ | | | | | | | +-----+-----+-----+-----+-----+-----+ | | | | | | | +-----+-----+-----+-----+-----+-----+ | | ...

htmlcss

Positioning a div relative to another div using the pos:fixed attribute

Is there a way to make a fixed position div relative to its parent div instead of the window using only CSS? I want a sticky block that follows the content while scrolling with the page, and stays in place even when the window is resized. I know this can ...

jquerycss

Having Multiple Login Forms on a Single Page

I have encountered an issue with my login form code. It works perfectly as a single form, but I need to have 20 of these forms on one page. Despite my efforts to duplicate the code for each new form and adjusting the IDs, I am unable to make more than one ...

javascriptjqueryhtmlformsauthentication

Adjustments to the positioning of masonry columns

Hello everyone, I'm in need of some assistance with editing this code. My goal is to make the effect clickable rather than activated by hovering. You can view the current code snippet here. Here is the existing code: $container.find('.shifty-i ...

jquerycss

Ways to include additional hyperlinks in my navigation bar

I am seeking ways to enhance my CSS menu so that there is no lag when new links are added. I aim to include 8 additional links if possible. Is there a way to prevent this delay and ensure that the links align correctly? nav { display: inline-block; ...

htmlcss

Tips on effectively showing padding and margins in django templates and minimizing empty space between rows using bootstrap

Still fairly new to the world of html, Django, and Bootstrap. I find myself struggling with grasping the concept of padding and margins. Is there a clever trick or CSS technique to visually display the padding and margins? I've noticed that margins do ...

htmlcssdjangodjango-widget-tweaks

Using jQuery to apply CSS with relative percentage values (+=/-=/)

Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...

jquerycss

Height of Bootstrap 4 footer aligned to the bottom

I've made a template that sets the height of the footer to 120px and specifies the line-height as well. Here is an example: .footer { height: 120px !important; line-height: 120px !important; } <!doctype html> <html lang="en"> &l ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to assign group headings to my Codeigniter view results?

One of the challenges I'm facing in my view is organizing a list like this: <? foreach($services as $service): ?> <tr> <td><?= $service->name; ?></td> <td><?= $service->format; ?></td> < ...

phphtmlcodeigniter