Creating a stationary navbar and sidebar with Bootstrap for your website

Is there a way to make the navbar and sidebar fixed when the user scrolls down the page without altering their design? I need them to be responsive as well. Can anyone assist me with this using bootstrap? Here is my fiddle: https://jsfiddle.net/exyvat08/17/

<div class="d-flex" id="wrapper">
 <div class="bg-light border-right" id="sidebar-wrapper">
  <div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div>

 <div class="list-group list-group-flush">
  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Dashboard</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>

  <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>

</div>

Original Design

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

htmlcssresponsive-designbootstrap-4

Answer №1

Revamp your CSS to resemble the code below:

.menu-bar{
    position: fixed;
    left: 0px; /* Ensure both left and right are set to '0px' */
    right: 0px;
    background: linear-gradient(to top right,#0084ff,#0084ff);
}
.content-wrapper{ /* Update this to serve as the container for your content */
    margin-top: 57px; /* Use 57px as the height of your menu bar */
}

View Demo: https://jsfiddle.net/exyvat08/17/

Answer №2

I successfully implemented fixed positioning for the sidebar and navigation bar using position: fixed along with width: calc

 $("#menu-toggle").click(function(e) {
   e.preventDefault();
   $("#wrapper").toggleClass("toggled");
   if (e.target.innerText == "Show Menu") {
     e.target.innerText = "Hide Menu";
   } else {
     e.target.innerText = "Show Menu";
   }
 });
body {
  height: 100%;
  overflow-x: hidden;
  font-family: sans-serif;

}

#logo {
  width: 160px;
  height: 150px;
  border-radius: 50%;
}

#page-content-wrapper {
    margin-left: 241px;
        width: calc(100% - 241px);
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
  position:fixed;
  z-index: 1;
  height:100vh;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

.navbar {
  background: linear-gradient(to top right, #0084ff, #0084ff);
  position: fixed !important;
       width: calc(100% - 241px);
   top:0px;
  
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}
<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <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">
  </head>

  <body>

    <body>
      <div class="d-flex" id="wrapper">
        <div class="bg-light border-right" id="sidebar-wrapper">
          <div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div>
          <div class="list-group list-group-flush">
            <a href="<?php echo url_for('admin/index.php')?>" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold"><i class="fas fa-tachometer-alt"></i>Dashboard</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>

            <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>

          </div>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">

          <nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
            <button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>

            <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="navbar-nav ml-auto mt-2 mt-lg-0">
                <li class="nav-item active">


                <footer>
                  <p>
                    All Rights Reserved.
                  </p>
                  <p>
                    Company Name
                  </p>
                </footer>
              </article>
          </section>
          <aside>
            <iframe src="contact.html"></iframe>
          </aside>
        </main>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 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>

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 best way to center the text vertically within a div element?

I recently designed a circular multi-step progress UI using HTML and CSS, but I encountered an issue when adding text underneath the circular icon. The line crossing the bar moved down because the circle's height increased based on the content length. ...

cssreactjsflexboxmaterial-uicss-position

What is the best way to eliminate the space underneath a graph?

Despite trying multiple solutions, I'm still struggling to remove the excess blue space below the graph that appears when clicking the submit button. Any insights into what might be causing this issue? JSFIDDLE Below are the CSS styles related to t ...

javascriptjqueryhtmlcss

Guide on clearing the value of the first textarea and transferring it to the second textarea using JavaScript

I have encountered an issue where the first textarea value is being copied into the second textarea because I am using the same id for the 'add more' functionality. Below is the code snippet: <div id="divShortAnswerOption_Templated"> & ...

javascriptjqueryhtml

Is it advisable to incorporate HTML into my PHP code?

Lately, I've been utilizing action="form.php" in my forms. However, now I am realizing that it may not be necessary to specify an action if the PHP and form elements are within the same file. Which approach offers more security: a standalone PHP file ...

phphtmlsecurity

Issues with screen scrolling becoming stuck in React and Material UI

Currently facing an unusual issue where scrolling on my mobile website becomes sticky, with intermittent responsiveness to touch. Struggling to identify the root cause as there are no console errors detected. Provided below is a snippet of code for a subse ...

htmlcssreactjsmaterial-ui

Ways to assign numerical values to vertical bars using HTML and CSS

Is there a way to create a Y-axis style line in HTML and CSS that looks like an actual Y-axis? I've attempted the following approach, which technically works but doesn't have the desired appearance. #mySpan{ writing-mode: vertical-lr; ...

javascripthtmlcss

Adding an indentation to the initial line of each paragraph within a text area

Is there a way to apply indentation to each paragraph within a text area as the user types? I tried using the code below: <textarea rows="1" style="height:1em; text-indent:-50px; padding-left:50px;" cols="25" html="true" id="text">Lorem Ipsum Lorem ...

javascriptjqueryhtmlcss

HTML is appearing as unformatted text on the screen

I am utilizing deta for rendering cloud-based HTML content. Below is the code snippet in use: from deta import Deta from fastapi import FastAPI, Request, Response, Form, File, UploadFile from fastapi.templating import Jinja2Templates from fastapi.response ...

pythonhtmlfastapi

What is the best way to retrieve data from a child component using v-if in Vue.js?

Having trouble accessing another variable within a Vue for loop... <div class="list-group" v-for="index in max_slots"> <div v-if="user[index].firstname"> <a href="#">{{user[index].firstn ...

htmlvue.js

varying perspectives in different browsers within my React application

I'm experiencing inconsistencies in the appearance of my website when viewed on Chrome mobile compared to Safari on an actual phone. Despite using prefixes for all my styles (WebKit, etc.) and incorporating normalize.css to address any issues, the dis ...

htmlcssreactjsresponsive-designcross-browser

One page experiences issues loading CSS due to MIME type, while a different page has no problem with it

I'm facing an issue with my express app that renders Mustache templates. The problem is related to the CSS not applying on one of the routes due to it being of MIME type text/html (as mentioned in the Chrome console). This is how I set up my express ...

cssnode.jsexpressmustache

unable to apply background to entire section

After using HTML5 and jquery to create a section, I attempted to set an image as the background. However, the image is not filling the entire section, leaving a 2px space around all sides inside the section. Below is the code I used: <div id="container ...

jqueryhtmlcss

Utilizing Multiple Calls in Django Templates

Hello, I am encountering an issue with multiple pagination on a single page. Let's say I have two lists, list1 and list2, displayed using Django paginator with variables list1_page and list2_page. Here is how my template is structured: {{ list1_page ...

htmldjangodjango-templatesdjango-pagination

Can the lazy load script dependent on jQuery be utilized before the jquery.js script tag in the footer?

After receiving HTML from an AJAX callback, I noticed that there is a script tag for loading code that uses jQuery. However, I consistently encounter the error of jQuery being undefined. All scripts are connected before the closing </body> tag. Is ...

javascriptjqueryhtmlajax

Position an element in CSS relative to two other elements

Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its ...

htmlcss

Encountering issues with the interaction between Bootstrap and my custom CSS file in a Flask app with

I am encountering an issue with my template where I have included both Bootstrap and CSS files, with Bootstrap loaded before CSS. However, when I try to apply custom CSS using IDs or classes, the changes do not reflect. Strangely, styling for h1 elements i ...

htmlcssflaskjinja2bootstrap-5

The HTML container expands in height with each adjustment of the window size

I am working on a simple three.js scene within a canvas element, and I want it to adjust dynamically upon window resize events. Specifically, I want the width of the canvas to change while keeping the height constant. Usually, I use window.innerWidth and ...

htmlcanvasthree.jselementwindow-resize

Unveiling the intricacies of CSS specificity

Struggling with the specificity of this particular CSS rule. Despite researching extensively, I still can't seem to grasp it. Can someone help me determine the specificity of the following: #sidebar h1, p em, p a:hover{ ... } ...

csscss-specificity

Retrieving the value of the name attribute from a div using the $_POST method

Seeking to retrieve the value of $_POST["number"] from the <div name="number" class="total"></div> HTML element with the total class attached. var count = 0; $('button').click(function(){ count++; count > 3 || $('.to ...

phpjqueryhtml

Is there a way to position a table to the left using bootstrap?

I've been struggling to align my table to the left side of my page using bootstrap with Flask. Despite numerous attempts, the tables remain centered and unaffected on the page as shown below. {% extends "base.html" %} {% block title %}Home{% ...

htmlcssbootstrap-4