How to make a navbar active tab height is bigger compare to other tabs?

Examples of what I want to achieve:

Here's my HTML code:

<ul class="nav nav-tabs flex-nowrap" id="myTab" role="tablist">
  <li class="nav-item" style="margin-left: -1px">
    <button
      class="nav-link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
    >
      About
    </button>
  </li>
  <li class="nav-item">
    <button
      class="nav-link"
      id="personalize-tab"
      data-bs-toggle="tab"
      data-bs-target="#personalize"
      type="button"
    >
      Personslize
    </button>
  </li>
  <li class="nav-item">
    <button
      class="nav-link"
      id="http-proxy-tab"
      data-bs-toggle="tab"
      data-bs-target="#http-proxy"
      type="button"
    >
      Http Title
    </button>
  </li>
  <li class="nav-item" id="data-processor-display" style="display: none">
    <button
      class="nav-link"
      id="data-processor"
      data-bs-toggle="tab"
      data-bs-target="#data-processor-click"
      type="button"
    >
      DSP Titel
    </button>
  </li>
  <li class="nav-item" id="mate-setting-display" style="display: none">
    <button
      class="nav-link"
      id="mate-settings"
      data-bs-toggle="tab"
      data-bs-target="#mate-setting-click"
      type="button"
    >
      MS Title
    </button>
  </li>
  <li class="nav-item" id="mate-manage-display" style="display: none">
    <button
      class="nav-link"
      id="mate-manage"
      data-bs-toggle="tab"
      data-bs-target="#mate-manage-click"
      type="button"
    >
      MM Title
    </button>
  </li>
</ul>

And this is the CSS I tried:

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: rgb(5, 5, 5);
  background-color: rgb(249, 249, 249);
  border: 1px solid rgb(198 198 198);
  height: 22px;
  border-bottom: 1px solid transparent;
}

I am using bootstrap, data-bs-toggle="tab".
I want the active tab a little bit taller compared to other tabs.

Solution

You can achieve it by using a negative margin on the active tab coupled with increasing the bottom padding by the same exact distance.

Example:

.nav-link.active {
  margin-top: -2px;
  padding-bottom: calc(0.5rem + 2px)
}

In the above CSS, the 2px is the distance by which the active item is moved up, without affecting anything else.

Note I'm setting the padding-bottom to calc(0.5rem + 2px) because the default bootstrap bottom padding on tab controls is 0.5rem. If you're using a theme which sets that padding to a different value, you'll need to adjust accordingly.

See it working:

body {
  padding-top: 2rem;
}
.nav-link.active {
  margin-top: -2px;
  padding-bottom: calc(0.5rem + 2px)
}

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
  crossorigin="anonymous"
/>

<body>
  <div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          id="home-tab"
          data-toggle="tab"
          data-target="#home"
          type="button"
          role="tab"
          aria-controls="home"
          aria-selected="true"
        >
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="profile-tab"
          data-toggle="tab"
          data-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="contact-tab"
          data-toggle="tab"
          data-target="#contact"
          type="button"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          Contact
        </button>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div
        class="tab-pane fade show active"
        id="home"
        role="tabpanel"
        aria-labelledby="home-tab"
      >
        ...
      </div>
      <div
        class="tab-pane fade"
        id="profile"
        role="tabpanel"
        aria-labelledby="profile-tab"
      >
        ...
      </div>
      <div
        class="tab-pane fade"
        id="contact"
        role="tabpanel"
        aria-labelledby="contact-tab"
      >
        ...
      </div>
    </div>
  </div>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"
  ></script>
</body>

Alternatively, you can increase the padding-top instead of the bottom one, thus making the text of the tab no longer go up along with the rest of the tab button. Or you can even split the 2px gained by the negative margin between the bottom and top padding:

body {
  padding-top: 2rem;
}
.nav-link.active {
  margin-top: -2px;
  padding-bottom: calc(0.5rem + 1px);
  padding-top: calc(0.5rem + 1px)
}

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
  crossorigin="anonymous"
/>

<body>
  <div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          id="home-tab"
          data-toggle="tab"
          data-target="#home"
          type="button"
          role="tab"
          aria-controls="home"
          aria-selected="true"
        >
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="profile-tab"
          data-toggle="tab"
          data-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="contact-tab"
          data-toggle="tab"
          data-target="#contact"
          type="button"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          Contact
        </button>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div
        class="tab-pane fade show active"
        id="home"
        role="tabpanel"
        aria-labelledby="home-tab"
      >
        ...
      </div>
      <div
        class="tab-pane fade"
        id="profile"
        role="tabpanel"
        aria-labelledby="profile-tab"
      >
        ...
      </div>
      <div
        class="tab-pane fade"
        id="contact"
        role="tabpanel"
        aria-labelledby="contact-tab"
      >
        ...
      </div>
    </div>
  </div>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"
  ></script>
</body>

Obviously, feel free to modify 2px to any other value you see fit considering your use case.

If you decide to work with bigger values, you might want to transition between states, so the button doesn't look like it's jumping into position:

body {
  padding-top: 2rem;
}
.nav-link.active {
  margin-top: -16px;
  padding-bottom: calc(0.5rem + 10px);
  padding-top: calc(0.5rem + 6px);
}
.nav-link {
  transition-timing-function: cubic-bezier(.5,0,.3,1);
  transition-duration: .2s;
  transition-property: margin-top, padding-top, padding-bottom;
}

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
  crossorigin="anonymous"
/>

<body>
  <div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          id="home-tab"
          data-toggle="tab"
          data-target="#home"
          type="button"
          role="tab"
          aria-controls="home"
          aria-selected="true"
        >
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="profile-tab"
          data-toggle="tab"
          data-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="contact-tab"
          data-toggle="tab"
          data-target="#contact"
          type="button"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          Contact
        </button>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div
        class="tab-pane fade show active"
        id="home"
        role="tabpanel"
        aria-labelledby="home-tab"
      >
        ...
      </div>
      <div
        class="tab-pane fade"
        id="profile"
        role="tabpanel"
        aria-labelledby="profile-tab"
      >
        ...
      </div>
      <div
        class="tab-pane fade"
        id="contact"
        role="tabpanel"
        aria-labelledby="contact-tab"
      >
        ...
      </div>
    </div>
  </div>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"
  ></script>
</body>