css - How to left justify content displayed next to a sidebar

I am attempting to use code from a Bootstrap 5.2 sidebar example I really like, but there's a small issue with it. When the sidebar is minimized, it displays a list of FontAwesome icons for each item in the sidebar menu, and when expanded, it shows a text description next to the icons. Here is what it looks like in collapsed mode:

And here is how it looks when it is expanded:

Here is the HTML and CSS code I'm using:

$(document).ready(function() {
  toggleSidebar();
});

function toggleSidebar() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('collapsed');
}

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: #34495e;
  transition: all 0.3s ease;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar-link {
  color: #ffffff;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px 16px;
  white-space: nowrap;
  overflow: hidden;
  width: 150px;
}

.sidebar-link:hover {
  color: #f7dc6f;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.sidebar-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.logo-text {
  background: #d4e6f1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.3s ease;
}

.notification-badge {
  background: #ff6b6b;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
}

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: 20px;
  transition: all 0.3s ease;
}

.collapsed~.main-content {
  margin-left: var(--sidebar-width-collapsed);
}

.toggle-btn {
  position: absolute;
  right: -15px;
  top: 20px;
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 100;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.collapsed .toggle-btn {
  transform: rotate(180deg);
}

.collapsed .hide-on-collapse {
  opacity: 0;
  visibility: hidden;
}

.collapsed .logo-text {
  opacity: 0;
}

.collapsed .sidebar-link {
  text-align: center;
  padding: 1rem !important;
  margin: 4px 8px;
}

.collapsed .sidebar-link i {
  margin: 0 !important;
}

<script src=".7.1/jquery.min.js"></script>
<div class="d-flex">
  <nav class="sidebar d-flex flex-column flex-shrink-0 position-fixed">
    <button class="toggle-btn" onclick="toggleSidebar()">
                <i class="fas fa-chevron-left"></i>
            </button>

    <div class="p-4">
      <h4 class="fw-bold mb-0 logo-text">ACME Widgets</h4>
    </div>

    <div class="nav flex-column">
      <a href="../default.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-home"></i>
                    <span class="hide-on-collapse">Site Home</span>
                </a>
      <a href="../producthome.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-box"></i>
                    <span class="hide-on-collapse">Products</span>
                </a>
      <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-chart-bar me-2"></i>
                    <span class="hide-on-collapse">Analytics</span>
                </a>
      <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-users"></i>
                    <span class="hide-on-collapse">Customers</span>
                </a>
      <a href="../members/myaccount.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-gear"></i>
                    <span class="hide-on-collapse">My Account</span>
                </a>
    </div>
  </nav>
</div>
<main class="main-content container-fluid">
  <h2>Welcome to ACME Widgets</h2>
  <p class="text-muted">
    Your trusted source for savings!
  </p>
</main>

And here is how it looks when it is expanded:

Here is the HTML and CSS code I'm using:

$(document).ready(function() {
  toggleSidebar();
});

function toggleSidebar() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('collapsed');
}

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: #34495e;
  transition: all 0.3s ease;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar-link {
  color: #ffffff;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px 16px;
  white-space: nowrap;
  overflow: hidden;
  width: 150px;
}

.sidebar-link:hover {
  color: #f7dc6f;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.sidebar-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.logo-text {
  background: #d4e6f1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.3s ease;
}

.notification-badge {
  background: #ff6b6b;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
}

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: 20px;
  transition: all 0.3s ease;
}

.collapsed~.main-content {
  margin-left: var(--sidebar-width-collapsed);
}

.toggle-btn {
  position: absolute;
  right: -15px;
  top: 20px;
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 100;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.collapsed .toggle-btn {
  transform: rotate(180deg);
}

.collapsed .hide-on-collapse {
  opacity: 0;
  visibility: hidden;
}

.collapsed .logo-text {
  opacity: 0;
}

.collapsed .sidebar-link {
  text-align: center;
  padding: 1rem !important;
  margin: 4px 8px;
}

.collapsed .sidebar-link i {
  margin: 0 !important;
}

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="d-flex">
  <nav class="sidebar d-flex flex-column flex-shrink-0 position-fixed">
    <button class="toggle-btn" onclick="toggleSidebar()">
                <i class="fas fa-chevron-left"></i>
            </button>

    <div class="p-4">
      <h4 class="fw-bold mb-0 logo-text">ACME Widgets</h4>
    </div>

    <div class="nav flex-column">
      <a href="../default.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-home"></i>
                    <span class="hide-on-collapse">Site Home</span>
                </a>
      <a href="../producthome.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-box"></i>
                    <span class="hide-on-collapse">Products</span>
                </a>
      <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-chart-bar me-2"></i>
                    <span class="hide-on-collapse">Analytics</span>
                </a>
      <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-users"></i>
                    <span class="hide-on-collapse">Customers</span>
                </a>
      <a href="../members/myaccount.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-gear"></i>
                    <span class="hide-on-collapse">My Account</span>
                </a>
    </div>
  </nav>
</div>
<main class="main-content container-fluid">
  <h2>Welcome to ACME Widgets</h2>
  <p class="text-muted">
    Your trusted source for savings!
  </p>
</main>

There is still a bit of cleanup to do to make sure the icons and text in the menu options line up, but right now the issue is this. You can see where the content is set to account for the space the sidebar would occupy when expanded, but it leaves ugly unused whitespace when the sidebar is collapsed.

My question is, how can I modify this code so the content shifts right when the sidebar is toggled to expand but is left justified when the navbar is collapsed? The IDEAL answer to me would be to find a way to display the collapsed sidebar as it shows, but then change it to an overlay (offcanvas) menu when expanded so the rest of the page does not have to change at all.

Thanks all for any help on this!

Share Improve this question edited Mar 3 at 18:35 David Thomas 254k53 gold badges382 silver badges419 bronze badges asked Mar 2 at 14:28 TampaSportsLover 1391 gold badge2 silver badges12 bronze badges

1 I've converted your posted code into a snippet to demonstrate your issue, unfortunately you're missing the JavaScript required to show the functionality you describe; could you please edit your question to include that code? – David Thomas Commented Mar 3 at 8:14
Done - and thank you – TampaSportsLover Commented Mar 3 at 17:35
Thank you, if you click the "run code snippet" button does it accurately reproduce the problem you describe in your question? It doesn't match the images you show, which means there's probably something different going on. – David Thomas Commented Mar 3 at 18:37

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

Thank you for sharing updated code.

Todos:

Update Css Variables in the root.
Remove container-fluid class from main-content.
Update Script as well.
Remove onClick function from toggle button.
Also Nav and main will be children of div with class d-flex

//Javascript Version
    //const toggleBtn = document.querySelector('.toggle-btn');
    //const sidebar = document.querySelector('.sidebar');
    
    //toggleBtn.addEventListener('click', function(){
    //  sidebar.classList.toggle('collapsed');
    //})
    
    //Jquery Version
    $(document).ready(function() {
          $(".toggle-btn").click(function(){
        $(".sidebar").toggleClass("collapsed");
      });
        });

:root{
        --sidebar-width:250px;
        --sidebar-width-collapsed:100px;
    }

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: #34495e;
  transition: all 0.3s ease;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar-link {
  color: #ffffff;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px 16px;
  white-space: nowrap;
  overflow: hidden;
  width: 150px;
}

.sidebar-link:hover {
  color: #f7dc6f;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.sidebar-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.logo-text {
  background: #d4e6f1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.3s ease;
}

.notification-badge {
  background: #ff6b6b;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
}

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: 20px;
  transition: all 0.3s ease;
}

.collapsed~.main-content {
  margin-left: var(--sidebar-width-collapsed);
}

.toggle-btn {
  position: absolute;
  right: -15px;
  top: 20px;
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 100;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.collapsed .toggle-btn {
  transform: rotate(180deg);
}

.collapsed .hide-on-collapse {
  opacity: 0;
  visibility: hidden;
}

.collapsed .logo-text {
  opacity: 0;
}

.collapsed .sidebar-link {
  text-align: center;
  padding: 1rem !important;
  margin: 4px 8px;
}

.collapsed .sidebar-link i {
  margin: 0 !important;
}

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="d-flex">
          <nav class="sidebar d-flex flex-column flex-shrink-0 position-fixed">
            <button class="toggle-btn">
                        <i class="fas fa-chevron-left"></i>
                    </button>

            <div class="p-4">
              <h4 class="fw-bold mb-0 logo-text">ACME Widgets</h4>
            </div>

            <div class="nav flex-column">
              <a href="../default.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                            <i class="fas fa-home"></i>
                            <span class="hide-on-collapse">Site Home</span>
                        </a>
              <a href="../producthome.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                            <i class="fas fa-box"></i>
                            <span class="hide-on-collapse">Products</span>
                        </a>
              <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                            <i class="fas fa-chart-bar me-2"></i>
                            <span class="hide-on-collapse">Analytics</span>
                        </a>
              <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                            <i class="fas fa-users"></i>
                            <span class="hide-on-collapse">Customers</span>
                        </a>
              <a href="../members/myaccount.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                            <i class="fas fa-gear"></i>
                            <span class="hide-on-collapse">My Account</span>
                        </a>
            </div>
          </nav>
        <main class="main-content">
          <h2>Welcome to ACME Widgets</h2>
          <p class="text-muted">
            Your trusted source for savings!
          </p>
        </main>
    </div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

css - How to left justify content displayed next to a sidebar - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)