Dynamic content alongside a stationary sidebar that adjusts in width

Question

Dynamic content alongside a stationary sidebar that adjusts in width

Attempting to create a switchable sidebar (toggling between short and long form) using bootstrap, multiple examples, and online resources.

The width of the sidebar changes when toggled, and I want the content to appear next to it regardless of its length.

Each page is divided into sections, and I aim for each section to display full-width on the screen similar to this.

$(document).ready(function() {
  $("#sidebarCollapse").click(function() {
    $("#sidebar").toggleClass("active");
    $(this).toggleClass('active');
  });
});
$("#aboutbutton").click(function() {
  $('html, body').animate({
    scrollTop: $("#aboutDiv").offset().top
  }, 2000);
});

body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #3498db;
}

a,
a:hover,
a:focus {
  color: inherit!important;
  text-decoration: none!important;
  transition: all 0.3s;
}

.wrapper {
  display: flex;
}
/* Other CSS code remains unchanged */

<!-- Link and script references remain the same -->

<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>José Gomes - Website</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="css/custom.css">

  <!-- in your header -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>

<body>

  <!-- Content will go here -->
  <div class="wrapper">
    <nav class="sidebar-nav" data-spy="affix" id="sidebar">
      <!-- Sidebar HTML structure remains the same -->
    </nav>
  </div>

  <!-- Page Content -->
  <div id="content container-fluid p-0">
    <!-- Div containing sections with content, dividers, etc. -->
  </div>

  </div>

Link to the jsfiddle example

Tried using a content wrapper and adjusting margin for the content class but still facing issues with the content appearing below or inside the sidebar.

html css twitter-bootstrap css-position sidebar

Answer 1

Answer №1

Is this what you were looking for?

$(document).ready(function() {
  $("#sidebarCollapse").click(function() {
    $("#sidebar").toggleClass("active");
    $(this).toggleClass('active');
  });
});
$("#aboutbutton").click(function() {
  $('html, body').animate({
    scrollTop: $("#aboutDiv").offset().top
  }, 2000);
});

body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #3498db;
}

a,
a:hover,
a:focus {
  color: inherit!important;
  text-decoration: none!important;
  transition: all 0.3s;
}

.wrapper {
  display: flex;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #2980b9;
  color: #ecf0f1;
  transition: all 0.3s;
  height: 100%;
  min-height: 100vh;
  position: fixed;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar ul.components {
  padding: 20px 0;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.6em;
  display: block;
  text-align: left;
}

#sidebar ul li a:hover {
  color: #ecf0f1;
  background: #3498db;
}

#sidebar .active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar .active i {
  font-size: 1em;
}

#sidebar .active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #ecf0f1;
  background: #3498db;
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #ecf0f1;
}

#sidebarCollapse {
  width: 100%;
  height: 80%;
  background: #2980b9;
  padding: 20px 0;
  font-size: 1.6em;
  display: block;
  border: 0;
}

#sidebarCollapse-wrapper {
  padding-top: 5%;
  padding-bottom: 5%;
}

#sidebarCollapse span {
  width: 30%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #fff;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
  /* rotate first one */
  transform: rotate(45deg) translate(2px, 2px);
}

#sidebarCollapse span:nth-of-type(2) {
  /* second one is not visible */
  opacity: 0;
}

#sidebarCollapse span:last-of-type {
  /* rotate third one */
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  /* no rotation */
  transform: none;
  /* all bars are visible */
  opacity: 1;
  margin: 5px auto;
}

.sidebar-nav.active + div#content{
margin-left:80px;
}
.sidebar-nav:not(.active) + div#content{
margin-left:250px;
}


section {
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
}

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>


<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>José Gomes - Website</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="css/custom.css">

  <!-- in your header -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>

<body>

  <!-- Content will go here -->
    <!-- Sidebar -->
    <nav class="sidebar-nav" data-spy="affix" id="sidebar">
      <!-- Sidebar Header -->
      <div id="sidebarCollapse-wrapper">
        <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">
        <span></span>
        <span></span>
        <span></span>
      </button>
      </div>
      <!-- Sidebar Links -->
      <ul class="list-unstyled components">
        <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i>  Home</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1
          </a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i>   Page2</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>   Page3</a></li>
      </ul>
    </nav>


  <!-- Page Content -->
  <div id="content" class="p-0">


    <div class="d-flex flex-column">
      <section class="p-3 p-lg-5 content-page" id="Section1">
        Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -
      </section>
      <section class="p-3 content-page">
        Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -
      </section>
      <section class="p-3 content-page">
        Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>
    </div>

  </div>

  </div>

Answer 2

Is this what you were looking for?

$(document).ready(function() {
  $("#sidebarCollapse").click(function() {
    $("#sidebar").toggleClass("active");
    $(this).toggleClass('active');
  });
});
$("#aboutbutton").click(function() {
  $('html, body').animate({
    scrollTop: $("#aboutDiv").offset().top
  }, 2000);
});

body {
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
}

p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #3498db;
}

a,
a:hover,
a:focus {
  color: inherit!important;
  text-decoration: none!important;
  transition: all 0.3s;
}

.wrapper {
  display: flex;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #2980b9;
  color: #ecf0f1;
  transition: all 0.3s;
  height: 100%;
  min-height: 100vh;
  position: fixed;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar ul.components {
  padding: 20px 0;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.6em;
  display: block;
  text-align: left;
}

#sidebar ul li a:hover {
  color: #ecf0f1;
  background: #3498db;
}

#sidebar .active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar .active i {
  font-size: 1em;
}

#sidebar .active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #ecf0f1;
  background: #3498db;
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #ecf0f1;
}

#sidebarCollapse {
  width: 100%;
  height: 80%;
  background: #2980b9;
  padding: 20px 0;
  font-size: 1.6em;
  display: block;
  border: 0;
}

#sidebarCollapse-wrapper {
  padding-top: 5%;
  padding-bottom: 5%;
}

#sidebarCollapse span {
  width: 30%;
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #fff;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
  /* rotate first one */
  transform: rotate(45deg) translate(2px, 2px);
}

#sidebarCollapse span:nth-of-type(2) {
  /* second one is not visible */
  opacity: 0;
}

#sidebarCollapse span:last-of-type {
  /* rotate third one */
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  /* no rotation */
  transform: none;
  /* all bars are visible */
  opacity: 1;
  margin: 5px auto;
}

.sidebar-nav.active + div#content{
margin-left:80px;
}
.sidebar-nav:not(.active) + div#content{
margin-left:250px;
}


section {
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
}

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>


<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>José Gomes - Website</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="css/custom.css">

  <!-- in your header -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>

<body>

  <!-- Content will go here -->
    <!-- Sidebar -->
    <nav class="sidebar-nav" data-spy="affix" id="sidebar">
      <!-- Sidebar Header -->
      <div id="sidebarCollapse-wrapper">
        <button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">
        <span></span>
        <span></span>
        <span></span>
      </button>
      </div>
      <!-- Sidebar Links -->
      <ul class="list-unstyled components">
        <li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i>  Home</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1
          </a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i>   Page2</a></li>
        <li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>   Page3</a></li>
      </ul>
    </nav>


  <!-- Page Content -->
  <div id="content" class="p-0">


    <div class="d-flex flex-column">
      <section class="p-3 p-lg-5 content-page" id="Section1">
        Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -
      </section>
      <section class="p-3 content-page">
        Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -
      </section>
      <section class="p-3 content-page">
        Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>
    </div>

  </div>

  </div>

Dynamic content alongside a stationary sidebar that adjusts in width

Answer №1

Similar questions

Using Jquery in combination with Bootstrap modal and PHP for website

Learn how to dynamically show the chosen option from a dropdown menu in input text fields using AngularJS

Utilizing HTML Elements for Conditional Statements

Adjusting the dimensions of the "overflow avatar" to be consistent with the other avatars displayed in AvatarGroup

Exploring the capabilities of SVG and audio integration in web browsers

Issue with border radius not applied to input-group in Bootstrap 3

Customize CSS class in ASP.Net

"Troubleshooting: Why is my jQuery .load function returning an empty div when

Implement two different styles within an element's style properties

Creating a layout with two divs displayed next to each other using CSS

Which web browsers are compatible with the input attribute "multiple"?

Utilizing a jQuery variable within an .html() method

Troubleshooting error with dual drop-down menus in burger menu on Bootstrap4

Guide to designing a progress bar using numerical data stored in a database

merging inline scripts within the <head> section

Why does using rgba color with an alpha value cause my div to become see-through?

Discovering the technique to dynamically load various content using jQuery in a div based on its

Horizontal image scrolling problem across different browsers

Issue with Hover Effect on Safari Browser

The feature in Chrome that automatically reloads generated CSS is failing to refresh the page after SASS recompiles the CSS