Shrinking a vertical Bootstrap navigation bar for mobile devices

I am currently using Bootstrap 5.3 and having difficulty collapsing this sidebar behind a hamburger menu on smaller screens. I have tried various solutions with the existing classes and utilities, but they are primarily designed for horizontal navbars. This causes some issues when applied to my vertical sidebar layout, leading to unexpected behavior.

<html><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b1aab7aab6">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container py-2">
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light shadow-sm p-0" id="topnav">
            <div class="container">
                <h1 class="m-0 text-uppercase">
                    <a class="navbar-brand" href="#">
                        Hello World
                    </a>
                </h1>
            </div>
        </nav>
        <main class="container py-4">
            <div class="row">
                <div class="col-md-2 py-md-1 px-md-0 me-md-2 bg-body shadow border-1">
                    <div class="row p-3 d-none d-md-flex">
                        <div class="col mr align-self-center">
                            Notice
                        </div>
                    </div>
                    <nav class="nav flex-column nav-pills" id="leftnav">
                        <a class="nav-link d-flex" href="#">Menu 1</a>
                        <a class="nav-link d-flex" href="#">Menu 2</a>
                        <a class="nav-link d-flex active" href="#">Menu 3</a>
                        <a class="nav-link d-flex" href="#">Menu 4</a>
                        <a class="nav-link d-flex" href="#">Menu 5</a>
                    </nav>
                </div>
                <div class="col-md-9 py-md-1 ms-md-2 bg-body justify-content-center shadow-sm">
                    Here's where the content goes.
                </div>
            </div>
        </main>
    </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1ecf1ed">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body></html>

This particular HTML structure was originally created for Bootstrap 3 or 4 and has been adapted over time to work with more recent versions of Bootstrap. I am open to reconsidering the entire layout (even switching to a standard horizontal navbar) to simplify things. I prefer not to duplicate the sidebar, as suggested in some outdated articles discussing collapsing sidebars.

htmlcsstwitter-bootstrap

Answer №1

After making significant changes to the layout, I had to adapt to Bootstrap 5.1 removing support for vertical navbars and introducing the offcanvas component instead. This led me to revamp the grid structure by utilizing offcanvas and eliminating the row/column grid on the outermost elements. Sharing my solution here in case it could be beneficial for others down the line.

@media (max-width: 767.98px) {
    div#app .shadow-sm {
        box-shadow: none !important;
    }
}
<html><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a978a96">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light shadow-sm p-md-0 bg-transparent" id="topnav">
            <div class="container justify-content-start">
                <button class="navbar-toggler me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftnav" aria-controls="leftnav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <h1 class="m-0 text-uppercase">
                    <a class="navbar-brand" href="#">
                        Hello World
                    </a>
                </h1>
            </div>
        </nav>
        <main class="container-fluid d-flex h-100 py-md-4">
            <nav id="leftnav" class="d-flex flex-column flex-shrink-0 offcanvas-md offcanvas-start py-md-1 px-md-0 me-md-2 bg-body shadow-sm">
                <div class="offcanvas-header">
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#leftnav" aria-controls="leftnav" aria-label="Close"></button>
                </div>
                <div class="nav offcanvas-body nav-pills flex-column mb-auto">
                    <div class="row p-3 pt-0 d-none d-md-flex">
                        <div class="col-md-8 offset-1 align-self-center">
                            Notice
                        </div>
                    </div>
                    <a class="nav-link d-flex" href="#">Menu 1</a>
                    <a class="nav-link d-flex" href="#">Menu 2</a>
                    <a class="nav-link d-flex active" href="#">Menu 3</a>
                    <a class="nav-link d-flex" href="#">Menu 4</a>
                    <a class="nav-link d-flex" href="#">Menu 5</a>
                </div>
            </nav>
            <div class="flex-fill py-md-1 ms-md-2 bg-body justify-content-center shadow-sm">
                <div class="container">
                    Here's where the content goes.
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378657864">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></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 conventional method for organizing forms in ASP.Net?

Here's my forms layout: <body> <p>Please note that this form is solely for illustrating the Required Field Validator and does not perform any actual function.</p> <form id="frmValidator" method="post" runat=" ...

c#asp.nethtmlcsslayout

Using jQuery to animate the width of a container after it is fixed to the top of the page based on the position of the

Wow, I've been tinkering away for hours and can't seem to crack this code puzzle. Let's dive into some CSS: #wrapper { margin: 0 auto; padding: 0 20px; width: 960px; } #wrapper .block { width: 920px; height: 690px; } ...

jquerycssanimationscrolleffects

Unable to activate the HTML anchor tag to initiate file download on Android devices

First, I am in the process of creating a mobile application using Visual Studio 2013 to retrieve a file from a local server. The code I am currently using to download a file works perfectly fine when clicking on pages, however it does not work when attemp ...

javascriptandroidhtmlvisual-studio-2013download

The Body and HTML elements compress to sizes significantly smaller than the viewport

I am currently working on making my WordPress website responsive. On one of the pages, I have two images that I want to set a max-width of 100% to ensure they are responsive. However, when I shrink the page in Chrome dev tools, I noticed that the <html& ...

htmlcssmobileresponsive-design

Unusual margin that demands attention!

I'm currently in the process of designing a website and have just started working on the header section. However, I've encountered an issue where there is an unexpected 28px margin at the top. Upon inspecting the code, I found the culprit: medi ...

htmlcssmargin

Removing Header Image from a Single Page on a WordPress Website

Having an issue with my website on WordPress, see it here - I am attempting to remove the home page link attached to the header image on a specific page only of the site. The theme in use is Twenty Thirteen. I believe I need to add some conditional PH ...

phphtmlwordpress

Fascinating CSS discovery regarding the inheritance of color and the currentColor property

Imagine you have the following piece of HTML: <a id=link1><span>Link 1</span></a> <a id=link2><span>Link 2</span></a> Now, accompanying this HTML is the following CSS: a { color: white; } a:hover { color: ...

htmlcsscss-selectors

Animating an element as the user scrolls down the page

I'm attempting to create a fading effect for a header on my website that should appear when the user scrolls past the initial section of the page. I currently have a div element with an opacity set to 0 and it transitions to an opacity of 1 as shown b ...

javascriptjquerycss

whole <li> tag with both <a href> and <span> elements to create a clickable link

[RESOLVED] Solution found: I finally realized that the closing </a> tag comes before the <span> tags in the initial HTML code provided in the question, which was causing the issue! Thank you to everyone for your assistance!! This just goes to s ...

csshtml-listsblockhtml

Demonstrate how to pass a newline character from Ruby on Rails to JavaScript

I am working with a .js.erb file that is activated by a JavaScript function. Within this js.erb file, I have the following snippet of code: event = <%=raw @event.to_json %> $('#preview-event-body').html(event.body); The value of event.bo ...

javascripthtmlruby-on-railsline-breakscarriage-return

Using jQuery to dynamically load content into a textbox and automatically set focus on the textbox

I'm attempting to display text in a div when the adjacent textbox is focused on, but I'm not seeing the desired result. Here is the jQuery script: <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <scrip ...

javascriptjqueryhtmlasp.netajax

How to create a circular element with horizontal alignment using CSS in a Bootstrap

Looking to center a CSS circle with an image and label overlay in the circle while ensuring it stays horizontally centered in a bootstrap column. Any tips or suggestions are appreciated. For reference, please visit this JSFIDDLE link <div class="conta ...

csstwitter-bootstrap

Enhance the input field with letter control

Here is a snippet of my HTML code for inputs: <form class="form" id="firstForm" novalidate="novalidate"> <div class="tab-content"> <div class="tab-pane active" id="vtab1"> <div class="form-group" ...

jqueryhtml

css: text not enclosed by a span tag

I created an HTML-CSS demo with two simple span tags. I added some content to each span, and applied the same CSS code to both. Surprisingly, the content of the right span goes beyond the border, while the content of the left span stays within the border. ...

htmlcss

Issues with displaying iframes on iOS devices, particularly iPhones

There is a strange issue I am encountering with iframes not displaying on certain phones while working perfectly on others. (They show up fine on all android devices) (However, they do not work on iphone 6 and 7 but surprisingly work on 7 plus, 7S, and a ...

ioscssiphoneiframe

Is the ID "nodeName" specifically designated as reserved in the HTML5 language specifications?

I have an element with the following id: <span id="nodeName"></span> In my HTML code. Then, when using jQuery to do the following: $("#nodeName").html("someString"); I am getting an error in the console that says: Uncaught TypeError: Objec ...

javascriptjqueryhtml

Vue click event does not function when used with an anchor tag containing an href attribute

Looking for a way to create an anchor tag that executes a click handler instead of following the href attribute when clicked. Currently working with Vue 1 and my code is as follows: <div v-if="!hasPage(category.code)"> <div> <templat ...

javascripthtmlvue.jsseo

Unable to interpret data output from PHP file using AJAX

I'm struggling with passing a form variable to an ajax request in my php file, and then displaying the php file's content in a div. Here is my primary code snippet: <div> <form name="zipform"> <p style="color:#ccccc ...

javascriptphpjqueryhtmlajax

Interactive dropdown menus using HTML and jQuery

My goal is to dynamically update a group of select boxes when another select box is changed. The challenge I'm facing is getting some of the select boxes to have the same options while allowing for the user to add more selects as needed. There will b ...

jqueryhtml

How to center a text box within a div using CSS

Looking for equal margins on top and bottom? Here's how to achieve it: If you have a container div like this: <div id="search"> <input id="txtSearch" type="txt"> </div> Your CSS should look something like this: #search{ m ...

htmlcsscentering