Display the sidebar on mobile devices as well

If you're interested in checking out the documentation page I'm working on, you can visit it here.

<div class="doc-sidebar col-md-3 col-12 order-0 d-none d-md-flex">
    <div id="doc-nav" class="doc-nav">
        <nav id="doc-menu" class="nav doc-menu flex-column sticky">
            <a class="nav-link scrollto" href="#download-section">Download</a>
            <a class="nav-link scrollto" href="#installation-section">Installation</a>
            <nav class="doc-sub-menu nav flex-column">
                <a class="nav-link scrollto" href="#step1">Step One</a>
                <a class="nav-link scrollto" href="#step2">Step Two</a>
                <a class="nav-link scrollto" href="#step3">Step Three</a>
            </nav><!--//nav-->
        </nav><!--//doc-menu-->
    </div>
</div><!--//doc-sidebar-->

Right now, the sidebar disappears when viewed on a mobile device, but I want to keep it visible even on smaller screens. The idea is to have the rectangular sidebar overlay the text below it, similar to this example:

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

Do any of you know how I can modify the code to achieve this effect? Afterwards, I plan to add a toggle button using jQuery to show/hide the sidebar on mobile (I already have an idea for that).

cssbootstrap-4flexboxsidebar

Answer №1

Hopefully this guide is useful. Please note that the design is not final, but it demonstrates how to utilize the navbar.

@media (max-width: 991px) {
  .navbar-toggler {
    position: absolute;
    top: 10px;
    margin-left: 15px;
  }
  .navbar-collapse {
    position: absolute;
    top: 54px;
    left: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    width: 100%;
  }
  .navbar-collapse.collapsing {
  position: absolute;
    height: auto;
    -webkit-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    transition: left 0.3s ease;

    left: -100%;
  }
  .navbar-collapse.show {
  position: absolute;
    left: 0;
    -webkit-transition: left 0.3s ease-in;
    -o-transition: left 0.3s ease-in;
    -moz-transition: left 0.3s ease-in;
    transition: left 0.3s ease-in;
  }
}
<!DOCTYPE html>
<!-- more HTML code here -->
</html>

Answer №2

If you want to create a vertical navbar that displays properly on mobile devices, check out the snippet below:

https://jsfiddle.net/nr1g5sLd/

Here is the code for the Navbar:

<nav class="navbar navbar-expand navbar-light bg-light  flex-column align-items-start">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 flex-column w-100 align-items-start">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                  </ul>
                </div>
              </nav>

Make sure to pay attention to the classes "flex-column" and "align-items-start."

For more information on using flex in Bootstrap, visit:https://getbootstrap.com/docs/4.3/utilities/flex/

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

Every field displaying a description above the input

Is there a way to customize the default wrapper for all fields? I am looking to have the description displayed above the fields instead of below them, which is the default behavior for Bootstrap. Check out this StackBlitz example: https://stackblitz.com/ ...

angularbootstrap-4ngx-formly

:before pseudo-element causing interference with child elements

Struggling to understand how an absolutely positioned :before element works. I need a large quote mark to be placed behind a testimonial. I opted for a :before element because it is a font, making it scalable for retina displays and saving an extra HTTP re ...

htmlcsspositionz-indexpseudo-element

Fade In/Out Scroll Effect

As the user scrolls down the page, I have a slider that smoothly slides from right to left. What I'm trying to achieve is for the slider to fade out when the last slide is no longer in view during downward scrolling, and fade back in as the last slid ...

javascriptcssreactjs

A neutral-toned backdrop that briefly shows up for a quick 7-second interlude during a background-image

Recently I created a website. On this website, there is a feature where 3 images change every 7 seconds for a total of 3 cycles. The code snippet used for this functionality is as follows: var swap; function run(interval, frames) { var int = 1; ...

javascriptjqueryhtmlcss

Guide to Adding a Video Background in Your ASP .NetCore MVC Web Application

As I dive into my latest project involving an ASP .NetCore web application, I'm encountering a roadblock when attempting to incorporate a video background. While there are numerous resources available for setting up video backgrounds in standard Html/ ...

asp.net-corebootstrap-4

Guide to creating a simple multi-column index linking each item to a specific page reference

Here's an idea I have in mind: Alan 12 | Byron 104 Alfred 54 | Charles 33 Ann 28 | Cleopatra 7 Basil 133 | Corey 199 ...

htmlcss

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

IMPORTANT: Please read the latest update at the end of the question! Check out this snippet from my HTML/CSS code: html { height: 100%; } body { height: 100%; margin: 0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699 ...

htmlcssinternet-explorer

Is there a way to prevent Javascript from modifying styles when printing?

Is there a way to prevent JavaScript from affecting styling during printing? For example, if I'm using JavaScript to hide certain content but want that content to be visible when printed. I have hidden a div using JavaScript and now I'm trying ...

javascriptcssxhtmlprinting

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug

Live Server has been found to have its CSS implementation overriden by

Just diving into the world of web development, I'm currently working on a simple app using VSCode and the Live Server extension. Even though my files are correctly linked, some of the CSS changes like background color and font family don't seem ...

cssvisual-studio-codebrowser-cache

I am experiencing an issue with importing my CSS file

Have a somewhat confusing HTML question that is frustrating me. I am struggling to incorporate certain css files into a jsp page. Here is what I have attempted: <link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet"> And also tri ...

htmlcsstwitter-bootstrapjsp

What is the recommended method for removing CSS classes in the Sencha ExtJS framework during a component event? (Those pesky red lines)

Occasionally, an aggravating red line will appear unpredictably when adjusting the size of this component using its split bar located at the top edge of the component. I managed to find a way to permanently eliminate the red line by removing its CSS class ...

cssclasseventsextjs4removeclass

Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...

javascriptjqueryhtmlcss

Having trouble with the functionality of Angular 2 filter and toggle features?

I recently developed a hamburger menu with a toggle function to display subcategories. Everything was working smoothly until I applied a filter. Once I search for a category using the filter, the toggle function stops working. Here is a snippet of my HTML ...

javascripthtmlcssangular

The mysterious case of disappearing Bootstrap 4 modals with data-target

I am retrieving a Json object from a local API, and everything is functioning properly. I use this object to populate a table with rows and columns, and each column contains a search button. When this button is clicked, it should open a modal displaying mo ...

htmlbootstrap-4

Is it possible to create a custom dropdown in react with both radio buttons and checkboxes?

I've been searching for a custom third-party library to meet a specific need I have. Here's a snapshot of the dropdown in question. I looked into https://www.npmjs.com/package/multiselect-react-dropdown but it doesn't cover this particular s ...

javascripthtmlcssreactjsarrays

Use href id to navigate back to the top of the page by

I am trying to implement a function that scrolls the div to the top position. However, I am encountering an issue with retrieving the href value. When I use 'a' in console.log(a);, it returns undefined. function myFunction() { var a=$ ...

javascriptjqueryhtmlcss

How to center a div both vertically and horizontally when height is not specified?

Is it possible to center a div on a webpage without specifying a fixed height, so that the height adjusts dynamically based on the content? I am willing to consider JS/jQuery solutions with fallback options but would prefer a pure CSS approach. Currently, ...

javascriptjqueryhtmlcss

The Electron app is experiencing issues with updating the edited index.html file properly

Recently, I decided to delve into learning Electron and as a beginner, I decided to clone a simple electron tutorial app to experiment with its features. (The official Electron starter app worked perfectly for me). The GitHub repository I used: https://gi ...

javascripthtmlcssnode.jselectron

What is the best way to create a fixed positioning for a div within a Material-UI table container?

When using the Material UI Table, I encountered an issue with applying the sticky property. The table itself works fine, but I also have a button inside the TableContainer that should be sticky alongside the table head. I attempted to achieve this by using ...

cssmaterial-ui