CODEWITHSUNDEEP
htmlcssbootstrap-4
John Doe
John Doe

Reputation: 71

How to solved error setting sidebar using fixed-top

I am using Bootstrap 4 and I am making use of the CSS class called fixed-top to leave my sidebar landline while I go down with the scroll, this works perfect, but it happens that what I have inside container-fluid which is a table, is below sidebar, as I show it in The following example:

Keep in mind that I also use one sidebar Toggle to contract or not the sidebar, likewise the table is below the

I leave the class fixed-top and class code container-fluid

.fixed-top {   
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

UPDATE:

Add HTML code

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="shortcut icon" href="/Content/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body id="page-top">

<!-- Page Wrapper -->
    <div id="wrapper">

        <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled fixed-top" id="accordionSidebar">

            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center">
                <div class="sidebar-brand-icon rotate-n-15">
                </div>                    
            </a>

            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Nav Item - Dashboard -->

                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "TicketForm")">
                        <i class="fa fa-paper-plane"></i>
                        <span>Abrir un ticket</span>
                    </a>
                </li>



            <li class="nav-item">
                <a class="nav-link" href="@Url.Action("Index", "Tickets")">
                    <i class="fa fa-bars"></i>
                    <span>Listado de Tickets</span>
                </a>
            </li>

            <!-- Nav Item ties Collapse Menu -->
                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "Service")">
                        <i class="fa fa-cogs"></i>
                        <span>Gestionar servicios</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "Report")">
                        <i class="fa fa-table"></i>
                        <span>Reportes</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="@Url.Action("Index", "Dashboard")">
                        <i class="fa fa-line-chart"></i>
                        <span>Dashboard</span>
                    </a>
                </li>

            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>

        </ul>
</body>
</html>

Upvotes: 1

Views: 118

Answers (2)

Jay Ukani
Jay Ukani

Reputation: 442

$(document).ready(function() {
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("menuDisplayed");
  });
});
/* Sidebar */

#sidebar-wrapper {
  z-index: 1;
  position: fixed;
  width: 150px;
  height: 100%;
  overflow-y: hidden;
  background: #5b4282;
  opacity: 0.9;
  transition: all 0.5s;
}


/* Main Content */

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
  padding-left: 150px;
  transition: all 0.5s;
}

#menu-toggle {
  transition: all 0.3s;
  font-size: 2em;
  display: block;
  text-align: center;
}


/* Change the width of the sidebar to display it*/

#wrapper.menuDisplayed #sidebar-wrapper {
  width: 250px;
}

#wrapper.menuDisplayed #page-content-wrapper {
  padding-left: 250px;
}


/* Sidebar styling */

.sidebar-nav {
  padding: 0;
  list-style: none;
  transition: all 0.5s;
  width: 100%;
  text-align: center;
}

.sidebar-nav li {
  line-height: 40px;
  width: 100%;
  transition: all 0.3s;
  padding: 10px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #ddd;
}

.sidebar-nav li:hover {
  background: #846bab;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <a href="#" class="btn" id="menu-toggle"><span class="fa fa-bars"></span></a>
    </div>

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">

            <h1 class="text-center">Sidebar</h1>
            <h2 class="small text-center">Second Header</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <!DOCTYPE html>
</body>

</html>

Upvotes: 2

Wasif Al Mahmud
Wasif Al Mahmud

Reputation: 11

You need to divide the page in two sections first. Then distribute them as content section and sidebar section. That should solve your overlapping issue. like below snippet

<body>
<div id="wrapper">
<div id="sidebar">
dashboard menu (that nav tag and its childs)...
make this div fixed and sticky
</div>
<div id="content">
Contents
</div>
</div>
</body

This is just div distribution without css.

Upvotes: 0

Related Questions