May 27, 2022 HTML

How can I change the navbar height in bootstrap?

Issue

I’m recreating the mac OS navbar and would like to resize the navbar height, and the text size (to around 12px). It’s the very first time I’m using bootstrap so any help would be amazing, please. Also, let me know about where I could find information about how to use bootstrap other than their website.

 <body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa-solid fa-power-off"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">About ziko OS</a>
              <a class="dropdown-item" href="#">Settings</a>
              <a class="dropdown-item" href="#">Log out</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              File</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Open</a>
              <a class="dropdown-item" href="#">Close Window</a>
              <a class="dropdown-item" href="#">Get info</a>
              <a class="dropdown-item" href="#">Move to trash</a>
              <a class="dropdown-item" href="#">Find</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Edit</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Undo</a>
              <a class="dropdown-item" href="#">Redo</a>
              <a class="dropdown-item" href="#">Cut</a>
              <a class="dropdown-item" href="#">Copy</a>
              <a class="dropdown-item" href="#">Paste</a>
              <a class="dropdown-item" href="#">Select All</a>
              <a class="dropdown-item" href="#">Emojis & Symbols</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Help</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">ziko OS help</a>
              <a class="dropdown-item" href="#">Search</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </body>

Solution

Basically you need to add css height to navbar class.

 <style>
.navbar{ height: 48px;}
.navbar a{font-size:12px;}
</style>

Please check this codepane Demo

Answered By – shammidevd

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply Cancel reply