What is the best way to transform a Bootstrap4 navbar into a mobile-friendly sidebar?

I currently have a Bootstrap 4 navbar (similar to the default navbar that collapses from top to bottom). However, I am looking to convert this navbar into a sidebar for the mobile version. Essentially, I want it to look something like this.

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top mb-4">
        <a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='dist/img/web3.svg') }}" alt="Example Navbar 1" class="mr-2" height="30"></a>
        <a class="navbar-brand"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-7" aria-controls="navbarNavDropdown-7" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    
       // Rest of the code here

https://i.sstatic.net/2WcXQ.png

htmlcssbootstrap-4

Answer №1

This query is quite reminiscent of: How can I create a responsive sidebar "drawer" in Bootstrap 4? .. the solution involves implementing a custom sidebar.

Mobile sidebars can become complex due to the various options available (push, overlay, auto-collapse, toggleable, icons, etc..), which could be why Bootstrap does not include a specific sidebar component by default.

To address this on mobile devices, utilize a CSS @media query to re-position the Navbar:
Check out this example

/* navbar transforms into mobile sidebar for lg breakpoint */
@media (max-width: 992px) {
    
    .navbar-collapse.collapsing .navbar-nav {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -45%;
        transition: all 0.2s ease;
    }

    .navbar-collapse.show .navbar-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        height: auto;
        width: 45%;
        transition: left 0.35s ease;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
}

Alternatively, you can also use the Bootstrap 4 modal as a sidebar, but this approach will require custom positioning and possibly duplicate content:
Here's an example

Another alternative would be converting the Navbar into a sidebar if it doesn't automatically collapse, like shown here:
View demo

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

Understanding the behavior of CSS float (even after thorough examination of W3C documentation)

I am currently facing an issue related to the float property and have provided a snippet of code below for reference. My goal is to achieve a two-column layout using floats. While I am familiar with other methods to achieve this layout, I am specifically i ...

htmlcsscss-floatw3c

Creating a dropdown in HTML that overlaps another div requires using relative and absolute positioning

Having created a navigation bar with dropdown menu items that reveal on hover, I encountered an issue. Below the navigation bar lies a slideshow of images. Whenever I hover over the dropdowns, the slideshow div obstructs the view, making it impossible to s ...

htmlcss

Showing off the latest products at the top of the list

Typically, when utilizing ngFor, the most recent item is displayed underneath the initial element. For instance, a list containing: [Apple, Orange, Banana] If we use ngFor to display this list: Apple Orange Banana I am interested in learning a method t ...

htmlcssarraysangulartypescript

Tips for positioning an element in the center of a page using Bootstrap both horizontally and vertically

[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...

htmlcsstwitter-bootstrap

Web Scraping for Results on Android

Hello, I am embarking on a new endeavor in Android Studio where I am attempting to build an application that can submit a form on a website's HTML and then parse the resulting HTML page for data. While I have some experience with Jsoup in the past, my ...

androidhtmlweb-scrapingjsoupheadless-browser

How can Selenium click on an <a> element using By.LinkText and bypass any line breaks within the link text?

One a element contains text with \r\n within it. The HTML code is shown below: <a href="/Profile/ProfileView?isSuccessScreen=1&amp;URLID=x/ayvqzf7zojzzqiauihka" class="list green profile "> <img src="/content/css/theme/images/pro ...

c#htmlselenium-webdriver

Create dynamic text on an HTML canvas starting from the center, displaying one character at a time while constantly adapting to the formatting

I am currently in the process of developing a website that has the capability to animate text, drawing each character onto a canvas one by one. I have successfully completed the initial coding for this functionality. However, my next challenge involves cen ...

javascripthtmlfunctioncanvassetinterval

Adjust the font size to fit within the container

My webpage features a bootstrap 4 container with three columns that adjust on screen sizes above the md breakpoint (col-md-4). Each column contains an img with the class img-fluid, and when hovered over, text description appears. I want this hover text to ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Retrieve the previous cost from an Amazon product listing

While working with Python's BeautifulSoup to extract the previous price from an Amazon page, I encountered a problem where my code was displaying the current price instead of the previous one. This is the code snippet I tried: priceold = soup.find(cl ...

pythonhtmlweb-scrapingbeautifulsoup

What is the proper way to request permission for allowing others to access the mailto function?

I want to create a feature where users can open email on click using JavaScript. However, I have encountered an issue with using the mailto function in Chrome, as it requires changing the handlers settings to make it work. My query is whether it is possib ...

javascripthtml

Creating a consolidated HTML table by extracting and comparing data from various JSON files

Being new to JS and JSON, I am struggling to find a suitable solution that works for me. I have two distinct json files. The first one: players.json contains the following data: { "players": [ { "id": 109191123, "surnam ...

javascripthtmljson

Minimizing stationary header when scrolling down the page

I am working on a website that has a fixed header. The homepage displays additional content in the header when you are at the top of the page. However, I would like to hide this extra content and reduce the size of the header as users scroll down the page. ...

javascripthtmljquerycssbootstrap-4

Form submissions are not saving checkbox answers

As a beginner, I'm struggling to save the checkbox answers on the page after submission. The code below is quite lengthy (checkboxes start at 314). I have a feeling that I might be missing a piece of code, but I just can't seem to pinpoint what i ...

javascripthtmlarraysreactjscheckbox

The updated Capybara now supports the CSS 'contains' selector

Before, my specifications had these lines: within "h3:contains('FooBar text') + dl" do page.should have_content 'FizzBuzz' end (within the definition list following a header that contains specific text) I recently updated capybara- ...

cssruby-on-railscss-selectorscapybaraqtwebkit

Pictures are loading fine on a Chrome tab, but are showing a 403 error in the React code

I've been working on a React project that includes images using the img tag. Some of these images are failing to load with a 403 error: https://i.sstatic.net/AmgkF.png Interestingly, these same images load perfectly fine in another tab on Chrome: h ...

javascripthtmlreactjshttp-status-code-403

`Safari 11 issue: CSS scaling on video container div causes video controls to become too small`

I am facing an issue with my DOM structure, where I have a video element within a container that is larger than the screen. In order to fit it onto the screen without changing its dimensions, I applied some scaling. However, I noticed that zooming out by a ...

htmlioscsssafariosx-elcapitan

The specified locator for the robot framework element could not be located

During my application testing in robot framework using RIDE editor, I encountered the following error. The element with the locator 'xpath: //*[contains(text(), "Applicant")]' was not found. Interestingly, the HTML page does contain the Appli ...

htmlseleniumrobotframeworkangular4-forms

Removing the currently selected item from the OwlCarousel

I am trying to enable users to delete the item that is currently active or centered in an OwlCarousel. I have come across some code related to deleting items, but it seems to be a rare question: $(".owl-carousel").trigger('remove.owl.carous ...

javascripthtmljqueryowl-carousel

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

javascripthtmlcss

Can PushState be used to Ajaxify CSS files?

Currently, I am in the process of developing a basic website and have decided to incorporate the Ajaxify library for seamless page transitions. One challenge I have encountered involves the combination of global CSS files (applied throughout the entire sit ...

javascriptjqueryhtmlcssajax