stackoom
  简体   繁体   中英

Make a fixed navbar and sidebar in bootstrap

 原文  2019-08-12 06:38:57  4   2    html/ css/ responsive-design/ bootstrap-4

Question

I just want to make the navbar and sidebar fixed even the user scroll down the page. And also responsive. How can I do that without changing the design of the navbar and sidebar? Can somebody help me with my problem using bootstrap? Here's 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

在此处输入图片说明

2 answers

solution1
 0  2019-08-12 06:44:27

Change your CSS to look like this: 

.navbar{
    position: fixed;
    left: 0px; /* the key here is to make left and right '0px' */
    right: 0px;
    background: linear-gradient(to top right,#0084ff,#0084ff);
}
.content-container{ /* change this to be the container of your content */
    margin-top: 57px /* 57px is just the height of your navbar */
}

Fiddle : https://jsfiddle.net/exyvat08/17/

solution2
 0  2019-08-12 08:14:02

I have fixed the siderbar & Nav bar fixed using position fixed & 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"> <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> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> <h1> test </h1> </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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Make a fixed navbar and sidebar in bootstrap 4? how to make sidebar to fixed navbar when scrolling How to make only center panel scrollable in bootstrap 4, but keep navbar and sidebar on the fixed positions? How to make navbar fixed in Bootstrap? fixed grid navbar and sidebar How to make navbar items a fixed width in Bootstrap 3 Navbar with sidebar in Bootstrap Bootstrap 4 - sidebar to top navbar Bootstrap 3: Fixed Right Sidebar Bootstrap fixed sidebar example
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM