css Question posted in
Some basic documentation can be found here.

Css – Adjust navbar height to be smaller

I was using the first header from bootstrap’s examples: https://getbootstrap.com/docs/5.3/examples/headers/#

And I have this:

<div class="container fixed-top bg-white">
      <header class="d-flex flex-wrap justify-content-center py-3 mb-4">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
          <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
          <span class="fs-4">Portfolio</span>
        </a>
  
        <ul class="nav nav-pills">
          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
          <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        </ul>
      </header>
    </div>

This is the navbar currently:
enter image description here

How do I have the top and bottom space equal?
enter image description here

Thank you,

Tags:

2

Answers


  1. 0

    IF you want to make it smaller remove the padding, I recommend adding py-3 to div above header.

    adjust the py-3(padding y axis) to lower values to make it even smaller.

     <div class="container fixed-top bg-white py-3">
        <header class=" d-flex flex-wrap  justify-content-center">

    WIthout padding how it looks

       <style>
        *{
            border: 0.2px solid red;
        }
    </style>

    use that bit of code inside your header to see the containers/layouts separately, then you will understand whats happening, at least thats how I do it.

    So once you see the sections properly you can figure it out.

    and once your done remove the border.

    Login or Signup to reply.
  2. 0

    In this line

    <header class="d-flex flex-wrap justify-content-center py-3 mb-4">

    mb- means margin-bottom. So, you can either remove mb-4 or change it to my-4 (margin-block). You can also make the margin bigger or smaller by changing the number from 0 to 5

    You will find more details here: https://getbootstrap.com/docs/5.3/utilities/spacing/

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

Back To Top
Search