Tips for transforming sidebar into a hamburger menu on narrow screens

I am currently working on a side menu that needs to be converted into a hamburger menu when viewed on small mobile screens.

I believe that all the content within 

<div class="collapse navbar-collapse" id="navbarSupportedContent">
should be displayed in the hamburger menu.

<!Doctype html>
    <html lang="en">
       <head>
          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          <title>Admin</title>
       </head>
       <body>
          <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
             <a class="navbar-brand" href="#">ADMIN PANEL</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">
                <!-- code here will be displayed in hamburger -->
             </div>
          </nav>
          <div class="container-fluid">
             <div class="row">
                <div class="col-3 ">
                   <ul class="list-group bg-primary ">
                      <li class="list-unstyled  border-0  p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                   </ul>
                </div>
                <div class="col-9">
                   My Content
                </div>
             </div>
          </div>
          <!-- Optional JavaScript -->
          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
       </body>
    </html>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Check out the bootstrap utility display classes

This could be the answer to your issue.

 <!Doctype html>
        <html lang="en">
           <head>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
              <title>Admin</title>
           </head>
           <body>
              <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
                 <a class="navbar-brand" href="#">ADMIN PANEL</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="list-group bg-primary d-block d-sm-none">
                      <li class="list-unstyled  border-0  p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                      <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                   </ul>
                 </div>
              </nav>
              <div class="container-fluid">
                 <div class="row">
                    <div class="col-3 d-none d-sm-block">
                       <ul class="list-group bg-primary ">
                          <li class="list-unstyled  border-0  p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                          <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                          <li class="list-unstyled  border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                          <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                       </ul>
                    </div>
                    <div class="col-9">
                       My Content
                    </div>
                 </div>
              </div>
              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
              <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
           </body>
        </html>

Answer №2

After building upon Gergana's solution, I have made additional improvements.
The left bar is now full screen with no paddings, and the overall layout has been enhanced.
Don't forget to give credit to Gergana for setting the milestone in this project.

<!Doctype html>
        <html lang="en">
           <head>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
              <title>Admin</title>
           </head>
           <body>

              <div class="container-fluid">
                  <div class="row">
                      <div class="col-3 d-none d-sm-block p-0 bg-secondary p-3 min-vh-100">
                          <h4 class="gray-3">Right bar</h4>
                          <ul class="list-group mt-4">
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 1 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 2 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 3 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 4 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 5 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 6 </a></li>
                              <li class="list-unstyled border-0 p-2"> <a href="" class="text-light">Product 7 </a></li>
                          </ul>
                      </div>
                      <div class="col-12 col-sm-9 p-0">
                          <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
                              <a class="navbar-brand" href="#">ADMIN PANEL</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="list-group bg-primary d-block d-sm-none">
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 1 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 2 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 3 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 4 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 5 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 6 </a></li>
                                      <li class="list-unstyled border-0 p-2"> <a href="" class="text-dark"><i class="fa fa-chevron-right"> </i>   Product 7 </a></li>
                                  </ul>
                              </div>
                          </nav>
                          <main class="p-4">
                              My Content
                          </main>

                      </div>
                  </div>
              </div>
              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
              <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></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

External CSS styling does not appear to be affecting the Shadow DOM in Google Chrome

I am currently utilizing polymer's paper-action-dialog and paper-button components on my webpage. Within the paper-action-dialog element, there are two paper-buttons. I am looking to style these paper-buttons externally (in the main HTML file). I have ...

htmlcssgoogle-chromepolymershadow-dom

Enhancing SVG graphics dynamically with JavaScript and ensuring compatibility across different web browsers

I am currently working on incorporating an element into an existing SVG file. Interestingly, the process runs smoothly on Chrome and Firefox but encounters issues on Edge. I aim for it to function seamlessly on the latest versions of all three browsers, wi ...

javascripthtmldomsvgmicrosoft-edge

How can you align two div elements side by side, if the first div is spanning across two lines?

I'm looking to position two divs next to each other, with the second div starting right where the first one ends. I came across a similar question on Stack Overflow, but unfortunately, it didn't have the answer I needed. <div id="wrapper"> ...

htmlcss

Adjusting text size in iOS7 when converting HTML to NSAttributedString

My UITextView is currently handling an NSAttributedString that was initially entered using the keyboard. I save this attributed string as HTML, and it looks fine. However, when I load it again and convert it back to an attributed string from the HTML, the ...

htmlfontsios7nsattributedstring

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

I'm working on an HTML page that lists users from MongoDB. The page allows for deleting and updating users. I am encountering an issue with the update button - I want a new HTML page to appear with a form when the button is clicked, capturing the user ...

javascripthtmlangularjs

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs

The CSS arrow breadcrumbs appear slightly fuzzy when viewed in Firefox

My arrow breadcrumbs are appearing a bit fuzzy in Firefox, but they look crisp in Chrome, Opera, and IE. Check out the CODEPEN Here is how it appears in Firefox: https://i.sstatic.net/9iX0g.png This is my HTML: <div class="row"> <div class=" ...

htmlcsstwitter-bootstrapfirefoxbreadcrumbs

Using CSS to create a color combination of black with varying opacities

I attempted to achieve a black color by blending together the colors red, yellow, and blue in CSS, but encountered an issue... Is there a way to create black color using opacity? ...

htmlcss

Delete the content within the span tag

Is there a way to remove the time + icon displayed on my blog page? <span><i class="fa fa-newspaper-o"></i>47 sec read</span> I attempted to use .fa-newspaper-o{display:hidden} however, this only hides the icon before "47 sec" b ...

htmlcss

What could be causing the gulp-clean-css task to output an empty file after minifying CSS?

When it comes to minimizing CSS, I rely on gulp-clean-css within a gulp.task. The file path I'm working with is css/mehr.css, and after minification, the new path becomes css/mehr.min.css However, upon running the task : gulp minify_css_task An is ...

cssnode.jsgulpclean-cssgulp-minify-css

The DataTable bootstrap is throwing an error when trying to access the property aDataSort

I am currently learning about bootstrap and working on a project that involves displaying data in a DataTable. However, I encountered an error that says Cannot read property aDataSort of undefined Feel free to make edits to my code if there are any mistak ...

javascriptjquerytwitter-bootstrapasp.net-mvc-4

Troubles with Bootstrap package and bundling in ASP.NET Core

I have Visual Studio 2017 installed and recently downloaded the Bootstrap package. However, I'm unsure of the next steps to take. I am using the bundle file and package... Could you provide guidance on what I should do next? Additionally, I obtained ...

asp.net-corebootstrap-4

Is it possible for HTML to provide alternative text for unique characters, such as accented characters?

I have a vision for HTML support that may incorporate the following: <span alt="Antonin Dvorak">Anton&iacute;n Dvo&#345;&aacute;k</span> In this scenario, if a browser cannot display special characters, it would default to showing ...

htmlhtml-entities

React JS tutorial: deleting an entry from the browser's localStorage

I am currently working on an App that fetches data from an API and updates it randomly every 3 seconds. The user has the ability to print the data by clicking a button, which can also be used to stop the random updates. I have managed to implement this fun ...

javascripthtmljquerycssreactjs

passing a PHP variable into an HTML input field

Recently, I've encountered a problem where I need to transfer PHP variables to HTML input fields. echo $ManuellTagnavnMain; for ($n = 0; $n < 6; $n++) { print_r(++$ManuellTagnavnMain.PHP_EOL); } I'm looking for a way to pass these values ...

javascriptphphtml

Using Selenium for Web Scraping: Identifying and interacting with a dropdown menu

Selenium version 3.141.0 I am currently developing a web scraping script that needs to interact with a dropdown menu using the Selenium webdriver. Unfortunately, I am facing difficulties in detecting this particular dropdown menu element. Despite attempti ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Button within Twitter Bootstrap popover having functionality issue

My button is located within a Twitter Bootstrap popover section with the ID 'newbutton'. When I try to use $('#newbutton').on('click',function(){ alert(123); }); nothing happens. However, if I move it outside of the popover ...

jquerytwitter-bootstrap

Ways to prevent CSS embedded in an email from impacting the entire webpage

My web application is designed to log emails sent from third-party applications like Outlook in a timeline using the maillin node.js framework. Everything is functioning correctly except for one significant issue. Whenever a user clicks on an email to vi ...

htmlcss

Adjusting the Color of the Checkbox when Selected

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-success"><input type="checkbox"> Low </label> <label class="btn btn-warning"><input type="checkbox"> Medium </label> <label class ...

htmlcssbootstrap-4

The positioning of the navbar is impacted by the float property of an element within a separate div

Currently, I am working on coding a basic website layout that includes a navigation bar positioned under the header. The issue I am facing is that the alignment of the navbar items depends directly on the length of the header element, but only when the hea ...

htmlcsscss-float