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

Html – How to make Boostrap burger menu items displayed horizontally?

I have a page with a Boostrap navbar. When we scale the page down, all of the navbar items collapse to the burger menu. Now, as expected, when we roll out the burger menu, the items are displayed in a "Burger" pattern, basically one under another. What I want to achieve is, to make the items, not displayed one under another, but one next to each other.
Visually Explained
Does anyone know how to do this?
(I am using the normal navbar presets, from the boostrap website:)
Here is the code that I want to transform:

<nav id="mynavbar" class="navbar navbar-expand-lg navbar-dark sticky-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            id="Logo"
            src="https://cdn.glitch.global/123df645-7c49-4cd3-b292-825ade4e767b/LogoTrimmedNewFont.png?v=1688645785034"
          />
        </a>
        <button
          class="navbar-toggler custom-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" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">
                <i class="bi bi-person-vcard"></i>
              </a>
              <h5 class="tooltiptext" style="text-align: left">
                Portfolio
              </h5>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="bi bi-person-check"></i>
              </a>
              <h5 class="tooltiptext" style="text-align:">
                &nbsp; Hiring
              </h5>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="bi bi-diagram-3"></i>
              </a>
              <h5 class="tooltiptext" style="text-align: left">
                &nbsp;&nbsp; Links
              </h5>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <i class="bi bi-envelope"></i>
              </a>
              <h5 class="tooltiptext" style="text-align:">
                &nbsp;Contact
              </h5>
            </li>
          </ul>
        </div>
      </div>
    </nav>

I have already tried to set:

@media (max-width:768px){
    .navbar-nav{
      display: inline;
  }
    .navbar-nav li{
      display: inline;
  }
}

but with no success…

Tags:

2

Answers


  1. 0

    You can set .navbar-nav to display: flex and flex-direction: row. Then add some padding/margins to .navbar-nav li

    JS Fiddle example: https://jsfiddle.net/vzeLwt62/

      @media (max-width:768px) {
  .navbar-nav {
    display: flex;
    flex-direction: row
  }
  .navbar-nav li {
    margin: 0 2rem
  }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://placeholder.pics/svg/150x50/888888/EEE/Logo" alt="..." height="36">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
        <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="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Page Content -->
<div class="container">
  <h1 class="mt-4">Logo Nav by Start Bootstrap</h1>
  <p>The logo in the navbar is now a default Bootstrap feature in Bootstrap! Make sure to set the height of the logo within the HTML or using CSS. For best results, use an SVG image as your logo.</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    Login or Signup to reply.
  2. 0

    You can give flex-direction: row to the .navbar-nav class.

    But note that, due to css specificity, select the class with the element ul, otherwise bootstrap default css will override your flex-direction value.

    Here is an example snippet:-

    ul.navbar-nav{
  flex-direction: row;
}

a.nav-link {
  padding: 0.5rem;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <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="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

    The snippet used is from the boostrap website.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search