How can I create a static navigation bar and sidebar using Bootstrap 4?

Currently, I am utilizing HTML, Javascript, Bootstrap, and CSS to develop a fixed navbar and sidebar for our system. My objective is to ensure that the navbar and sidebar remain fixed even when users scroll down the page, while also maintaining responsiveness. How can this be achieved without altering the design of the existing navbar and sidebar? Can anyone offer assistance with my predicament using bootstrap? You can find my jsfiddle link here: https://jsfiddle.net/exyvat08/17/

Original Design https://i.stack.imgur.com/HlygF.png

The issue arises when attempting to incorporate the 'fixed-top' class and custom CSS

https://i.stack.imgur.com/OVzjX.png

<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">
          <a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">See Profile</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
javascripthtmlcssbootstrap-4

Answer №1

Implementing a fixed-top navbar using the bootstrap class and custom CSS

$("#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;
}
/* Additional custom CSS styles */

<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">
<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>

<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 fixed-top navbar-light bg-success border-bottom">
      <button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>
      /* Additional menu toggle 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>
      /* Navbar toggler for responsive design */

      /* Navigation links and dropdown menus go here */    
      
    </nav>

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit... (Text continues)

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

Neglectful TypeScript null checks overlooking array.length verification

When TypeScript is compiled with strict null checks, the code snippet below does not pass type checking even though it appears to be correct: const arr: number[] = [1, 2, 3] const f = (n: number) => { } while (arr.length) { f(arr.pop()) } The comp ...

javascripttypescripttypesnulltype-inference

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates. var bodyElement = document.body; bodyElement.addEvent ...

javascripthtmlgoogle-chromemobilepointer-events

Issue: Request from a different origin blocked

I encountered an issue while working on a web project using the PlanGrid API. I am receiving a cross-domain request block error. var apiKey="API KEY"; var password="PASSWORD"; $.ajax({ url: "https://io.plangrid.com/projects", xhrFields: { ...

javascriptajaxcross-domainpreflight

What is your approach to setting up this navigation system with HTML and CSS?

Navigation Nav w/ Hover State Can you create a navigation menu using HTML and CSS? The white box serves as a placeholder for a logo. Note: The "Products" link has a drop-down menu feature. See my current implementation below, although it's not ye ...

htmlcsscss-shapes

What is the process to set up a WebSocket on Tornado for a production server rather than on a local machine?

Recently, I've delved into the world of WebSockets but have only experimented with them in a localhost environment while developing locally. Following this informative tutorial on real-time data visualization: https://medium.com/@benjaminmbrown/real-t ...

javascriptpythonwebsockettornado

How to Style an Element Based on Fragment Identifier in Href Attribute Using CSS

I've implemented the tabview feature from the YUI3 library. This is how the markup code appears: <div id="demo" class="yui3-tabview-content"> <ul class="yui3-tabview-list"> <li class="yui3-tab yui3-widget yui3-tab-selected"> ...

csscss-selectorsfragment-identifier

Ensure that the logo/header remains fixed at the top of the page at all

Currently, I am facing an issue with keeping my logo/header at the top of the page. I have experimented with CSS properties like position: fixed; z-index: 9999; top: 0; left: 0;, and even tried adjusting the positioning to left: 40%; in an attempt to cente ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

What is the best way to ensure only one item is being selected at a time?

In the initial state, I want 'ALL' to be automatically selected. Clicking on another item should change the classes so that only 'this' has the class and the others do not. However, I am facing an issue where 'ALL' cannot be r ...

javascriptjqueryhtmlcss

Body Parser causing unexpected output

Currently encountering an issue when attempting to log the body of a POST request in my console. Despite seeing the payload in my Chrome console with the correct data, I am receiving the following error: express_1 | TypeError: Cannot read property ' ...

javascriptexpresspostbody-parser

Exploring ways to personalize Angular UI Bootstrap tabs to match the styling of Angular Material tabs

Currently, I am utilizing Angular UI Bootstrap in my project. <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="//ajax.googleapis.co ...

javascriptangularjstwitter-bootstrap

Chrome is struggling to load pages, forcing users to scroll endlessly to find the content they are looking for

Encountering a problem where Chrome occasionally displays a particular page off-screen. Currently using Mac OSX, working on a Backbone.js App with client-side development only, no PHP/Node. The page is loading completely off-screen, requiring me to scrol ...

javascriptjquerygoogle-chrome

With a tree arrangement flanking the Transfer module on either side

I have successfully implemented the antd's Transfer component using the examples provided in the documentation. I was able to create a tree transfer box that looks like this: However, I am wondering if there is a way to have a tree structure on both ...

javascriptreactjsantd

Tips for utilizing the if-else directive in an AngularJS controller

My current challenge involves HTML coding. <li><strong>Scrub:</strong> {{insuredProfile.permanentAddress.isScrubbed}}</li> This code displays either true or false. I want to show Yes for true and No for false. Using data-ng-if, ...

htmlangularjs

"Using jQuery to trigger a click function on elements with the same

Whenever I click the comment link all of the divs are opening but i need that particular only to be opened. HTML: <div> <a href="#" class="ck">comment</a> <div class="cmt"> <input type="text" class="txt"/> ...

jqueryhtml

javascript - audio is not working on the web

I've been trying to incorporate sound into my website using this code. Strangely, the sounds only seem to play in Adobe Dreamweaver and not in any browsers. Any advice would be greatly appreciated! :) var audio1 = new Audio('sound1.mp3'); v ...

javascriptaudio

Incorporating the JqueryUI menu into an AngularJS project

We are facing an issue with integrating JqueryUI menus into our AngularJS application. In our Layout.js file, we are attempting the following: OURApp.controller('leftBarCtrl', ['$scope', function ($scope) { $scope.init = function ( ...

javascriptjqueryangularjsjquery-ui

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

updating information automatically on page every X seconds for Angular component

I am trying to implement a way to automatically refresh the data of an Angular component every 30 seconds. Currently, I have used a simple setInterval function like this: this.interval = setInterval(() => { this.refresh(); // api call ...

javascriptangularsingle-page-application

Ways to refresh my $scope once new data is inserted into the SQL database

As I implement the angularjs/SQL technique to fetch data from a database, the code snippet below demonstrates how it is done: $http.get("retrieveData.php").then(function(response){ $scope.tasks = response.data.tasks; }) In addition, there is a functi ...

javascriptangularjs

What is the proper way to utilize a class with conditional export within the Angular app.module?

This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...

javascriptangulartypescriptkeycloak