How can I change the navbar height in bootstrap?-CodePudding

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 >
      <div  id="navbarNavDropdown">
        <ul >
          <li >
            <a  href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i ></i>
            </a>
            <div  aria-labelledby="navbarDropdownMenuLink">
              <a  href="#">About ziko OS</a>
              <a  href="#">Settings</a>
              <a  href="#">Log out</a>
            </div>
          </li>
          <li >
            <a  href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              File</a>
            <div  aria-labelledby="navbarDropdownMenuLink">
              <a  href="#">Open</a>
              <a  href="#">Close Window</a>
              <a  href="#">Get info</a>
              <a  href="#">Move to trash</a>
              <a  href="#">Find</a>
            </div>
          </li>
          <li >
            <a  href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Edit</a>
            <div  aria-labelledby="navbarDropdownMenuLink">
              <a  href="#">Undo</a>
              <a  href="#">Redo</a>
              <a  href="#">Cut</a>
              <a  href="#">Copy</a>
              <a  href="#">Paste</a>
              <a  href="#">Select All</a>
              <a  href="#">Emojis & Symbols</a>
            </div>
          </li>
          <li >
            <a  href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Help</a>
            <div  aria-labelledby="navbarDropdownMenuLink">
              <a  href="#">ziko OS help</a>
              <a  href="#">Search</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </body>

CodePudding user response：

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