Question 246529 in Html Question posted in
Some basic documentation can be found here.

Html – why can't it be a horizontal sidebar on the smartphone display?

I want to make the sidebar menu display on my smartphone horizontal or sideways with icons at the top and text at the bottom, but I’ve tried using flex and others but it still fails and can’t go sideways. Is there something I’m missing?

const sidebar = document.getElementById('sidebar');
const navbarToggle = document.querySelector('.navbar-toggler');

navbarToggle.addEventListener('click', () => {
  if (window.innerWidth <= 767) {
    sidebar.classList.toggle('show');
  }
});
body {
  padding-top: 70px; /* Adjusted padding top */
}

@media (max-width: 767px) {
  body {
    padding-top: 56px;
  }

  #sidebar {
    display: flex;
    flex-direction: column;
    background-color: #343a40;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem 0;
    width: 100%;
  }

  #sidebar .nav-link i {
    font-size: 1.2rem; /* Adjust icon size */
    margin-bottom: 0.2rem;
  }

  #sidebar .nav-link.active {
    font-weight: bold;
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  #sidebar .nav-link i {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  #sidebar {
    display: block;
    position: sticky;
    top: 0;
  }

}

#sidebar .nav-link span {
  display: block;
}

#sidebar .nav-link i {
  margin-bottom: 0.25rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
  <title>Complex Navbar and Sidebar</title>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">
                <i class="fas fa-home"></i> Dashboard
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-shopping-cart"></i> Orders
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-box"></i> Products
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-users"></i> Customers
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-chart-bar"></i> Reports
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <h2>Main Content</h2>
        <p>This is the main content area.</p>
      </main>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

I would be very grateful if anyone could explain why it can’t change.

I want to try changing the sidebar on a PC or tablet display vertically and when in the smartphone display position it becomes horizontal at the bottom of the screen with icons above the text on the smartphone screen display

Tags:

2

Answers


  1. 0

    Because you are using Bootstrap, you must write some Javascript to change that menu’s class from flex-column to flex-row. All you need is a script to check the view width, and if it’s in mobile view, you’ll need to update the class.

    In my example, I added an ID to grab the menu id="menu" and included a script. If you put this example on a full page and resize it, the layout will update. All you need now is to style your menu for a horizontal view.

    const sidebar = document.getElementById('sidebar');
const navbarToggle = document.querySelector('.navbar-toggler');

navbarToggle.addEventListener('click', () => {
  if (window.innerWidth <= 767) {
    sidebar.classList.toggle('show');
  }
});

let menu = document.getElementById("menu");

addEventListener("resize", (event) => {
  if (window.innerWidth <= 500 ) {
    menu.classList.remove("flex-column");
    menu.classList.add("flex-row");
  }
  else {
    menu.classList.remove("flex-row");
    menu.classList.add("flex-column");
  }
});
    body {
  padding-top: 70px; /* Adjusted padding top */
}

@media (max-width: 767px) {
  body {
    padding-top: 56px;
  }

  #sidebar {
    display: flex;
    flex-direction: column;
    background-color: #343a40;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem 0;
    width: 100%;
  }

  #sidebar .nav-link i {
    font-size: 1.2rem; /* Adjust icon size */
    margin-bottom: 0.2rem;
  }

  #sidebar .nav-link.active {
    font-weight: bold;
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  #sidebar .nav-link i {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  #sidebar {
    display: block;
    position: sticky;
    top: 0;
  }

}

#sidebar .nav-link span {
  display: block;
}

#sidebar .nav-link i {
  margin-bottom: 0.25rem;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
  <title>Complex Navbar and Sidebar</title>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column" id = "menu">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">
                <i class="fas fa-home"></i> Dashboard
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-shopping-cart"></i> Orders
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-box"></i> Products
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-users"></i> Customers
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-chart-bar"></i> Reports
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <h2>Main Content</h2>
        <p>This is the main content area.</p>
      </main>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    It can be, you just need to override the .flex-column‘s flex-direction property (because it has an !important in it), like so:

    const sidebar = document.getElementById('sidebar');
const navbarToggle = document.querySelector('.navbar-toggler');

navbarToggle.addEventListener('click', () => {
  if (window.innerWidth <= 767) {
    sidebar.classList.toggle('show');
  }
});
    body {
  padding-top: 70px;
  /* Adjusted padding top */
}

@media (max-width: 767px) {
  body {
    padding-top: 56px;
  }
  #sidebar {
    display: flex;
    flex-direction: column;
    background-color: #343a40;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #sidebar .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem 0;
    width: 100%;
  }
  #sidebar .nav-link i {
    font-size: 1.2rem;
    /* Adjust icon size */
    margin-bottom: 0.2rem;
  }
  #sidebar .nav-link.active {
    font-weight: bold;
  }
  /*overriding with this: */
  #sidebar .flex-column {
    flex-direction: initial !important;
  }
  .nav-item {
    padding: 10px;
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  #sidebar .nav-link i {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  #sidebar {
    display: block;
    position: sticky;
    top: 0;
  }
}

#sidebar .nav-link span {
  display: block;
}

#sidebar .nav-link i {
  margin-bottom: 0.25rem;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
  <title>Complex Navbar and Sidebar</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">
                <i class="fas fa-home"></i> Dashboard
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-shopping-cart"></i> Orders
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-box"></i> Products
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-users"></i> Customers
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="fas fa-chart-bar"></i> Reports
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <h2>Main Content</h2>
        <p>This is the main content area.</p>
      </main>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search