Non-responsive sidebar

I am currently facing two issues with my sidebar.

  1. The top part gets cut off on mobile devices.
  2. The sidebar is expanded by default on mobile devices, which is not the desired behavior. Also, when it is collapsed, the content of the page does not shift to the left as it should.

I am using Bootstrap 5.

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 45px 0 0;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 220px;
}

.sidebar .active {
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

@media (max-width: 767px) {
  .main {
    padding-right: 40px;
    padding-left: 220px;
    /* 180 + 40 */
  }
}
<link href="https://cdn.jsdelivr.net/npm/example/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/example/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">



<div class="container-fluid">
  <div class="col-md-12 col-sm-12">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
          <div class="position-sticky pt-3">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
                  <span data-feather="home"></span> Test
                </a>
                <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
                  <span data-feather="home"></span> Test
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">
                  <span data-feather="file"></span> Test
                </a>
                <a class="nav-link" aria-current="page" href="#">
                  <span data-feather="file"></span> Test
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <span data-feather="file-plus"></span> Test
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <span data-feather="users"></span> Test
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div class="col-md-8 col-sm-8">
        {% block body %}{% endblock %}
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

Utilizing CSS Media Queries can help determine the necessary actions based on the screen size. In this case, adjusting the position and size of the sidebar depending on the screen size is recommended.

@media (max-width: 600px) { 

*This is specifically for mobile phones (you may need to determine accurate pixel measurements)*

}

Edit:

I noticed that you already have Media Queries implemented. Consider altering both the size and position, not just the padding.

Edit: Here is a simple demonstration that should adequately address your concern. Additionally, you can refer to this resource for further assistance. It would be appreciated if you could mark this response as the solution. Thank you!

function openNav() {
  const a = document.getElementById("sidebarMenu");
  const b = document.getElementsByClassName("CLASS NAME HERE");
  a.style.width = "220px";
  for(var i = 0; i < b.length; i++) {
    b[i].style.width = "100%";
  }
}
function closeNav() {
  const a = document.getElementById("sidebarMenu");
  const b = document.getElementsByClassName("CLASS NAME HERE");
  a.style.width = "0";
  for(var i = 0; i < b.length; i++) {
    b[i].style.width = "0";
  }
}
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 45px 0 0;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
    width: 220px;
}
 
.sidebar .active {
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.closebtn {
position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
 
@media (max-width: 767px) {
    .sidebar {
        padding: 120px 0 0;
    }
}
<span onclick="openNav()">open</span>
<div class="container-fluid">
    <div class="col-md-12 col-sm-12">
        <div class="row">
            <div class="col-md-4 col-sm-4">
                <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
                    <div class="position-sticky pt-3">
                        <ul class="nav flex-column">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
                                    <span data-feather="home"></span> Test
                                </a>
                                <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
                                    <span data-feather="home"></span> Test
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">
                                    <span data-feather="file"></span> Test
                                </a>
                                <a class="nav-link" aria-current="page" href="#">
                                    <span data-feather="file"></span> Test
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span data-feather="file-plus"></span> Test
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span data-feather="users"></span> Test
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="col-md-8 col-sm-8">
            </div>
        </div>
    </div>
</div>

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

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

javascriptcssreactjstypescriptmaterial-ui

Error: The request to /api/auth/login in Postman failed unexpectedly

As I am working on developing an app using node.js and express, I encountered an error while making post requests in Postman. Cannot POST /api/auth/login%0A Below are the details of my app's structure along with the files involved: app.js const ex ...

javascripthtmlnode.jsexpresspost

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

javascriptjqueryhtmlcss

Having trouble with getting the second JavaScript function to function properly?

I am facing an issue with the second JavaScript function. When I click the 'Send Mail' button, it should call the second function and pass it two values. However, the href line (second last line in the first function) is not rendering correctly. ...

javascriptjqueryhtmlfunctionurl

Retrieve the value of the option that has been selected and then send it over to the function

Hello, I am currently working on creating a reservation page using Razor Pages in ASP.NET. The page includes two drop down lists - one for selecting the location and the other for choosing a room within that specific location. I want to pass the selected l ...

htmlasp.net.netasp.net-corerazor

Slider that is always being updated cannot be moved by dragging

Currently, I am utilizing React wrapped with cljs+reagent to develop a small application. One key feature I require is a slider that updates roughly every second and can be adjusted by the user. At present, my implementation looks like this: [:div.scrubb ...

htmlreactjsrange

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

Tips for making li elements scroll horizontally whilst fitting all elements on one line exclusively using CSS

I am attempting to alter the default scrolling behavior of li elements from vertical to horizontal in HTML. I have successfully achieved this, but the output displays a succession of lists in a line, followed by another list below it. However, I desire to ...

htmlcss

Tips for modifying CSS when a user scrolls beyond a specific div

Currently, I am working on implementing a scroll function that dynamically moves elements based on the user's scrolling behavior. The code I have written works to some extent and successfully moves the elements. However, my goal is to create a list o ...

javascriptjqueryhtmlcss

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table. <table width="510"> <tbody> <tr> <td style="background-color: #fff;" colspan="2" width="510"> ...

htmlcsscss-tables

Scraping Information on Pokemon from the Web

I am currently researching the number of moves each Pokemon from the first generation could learn. After some exploration, I came across a helpful website that provides this information: The website lists 151 Pokemon, and for each of them, their move set ...

htmlrweb-scraping

Run Javascript code if a specific CSS class is present on an element

Whenever a user enters an incorrect value into a textbox on my page, an error message is displayed within a div with the class 'validation-errors'. I'm looking for a solution to trigger a javascript function (which adds a CSS property to a ...

javascriptjqueryhtmlcssasp.net-mvc

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Can anyone help me figure out how to hide the border behind the title text in an outlined textfield from Material-UI that I am trying to imitate? In the image below, you can see "Due Date/Time" taken from Material-UI library where the title hides the bord ...

cssreactjsmaterial-ui

Increase the size of the image while ensuring the content on the right remains proportionate

I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...

phphtmlcss

Tips for enlarging an image element without causing the header to expand

I'm looking to enhance a logo image within a header element by expanding it on hover or creating a pulse effect. I thought of increasing the max-width and adding a transition for simplicity. However, my main concern is how to make only the img element ...

htmlcssbootstrap-4

Enhance your AngularJS table with a custom Javascript context menu!

In the process of developing a shift planner, I have implemented a JS context menu and am attempting to display the shifts using Angular. However, upon clicking any table cell, all cells are being updated simultaneously. Is there a workaround for this issu ...

javascriptjqueryhtmlcssangularjs

Using PHP to substitute a particular HTML tag with new content

Here is an example of HTML code: <div> <h1>Header</h1> <code><p>First code</p></code> <p>Next example</p> <code><b>Second example</b></code> </div> I am tryin ...

phphtmldomdocument

What is the best way to position a DIV class on top of another DIV class in a specific location?

I have successfully implemented a simplistic bar chart using CSS and HTML. The chart comprises two DIV classes: one for the background bar and another for the front bar. The heights of these bars are dynamically set based on percentage values passed from P ...

htmlcss

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Using the CSS property scroll-snap-type: y mandatory; to customize my scrollbar with the following styles: ::-webkit-scrollbar { width: 12px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); -webkit-box-s ...

javascripthtmlcss

What is the function of object-fit when used with the canvas element?

Despite my thorough search, I have not come across any documentation to clarify this issue. Is it possible to use object-fit cover on canvas elements? My experiments have yielded unexpected results so far. Could someone provide me with a conclusive answe ...

csshtmlhtml5-canvasobject-fit