Making HTML element of menu item the same height as the navigation bar

Question

I'm trying to style a navigation bar (Bootstrap 4) so when hovering over a menu item it looks like in the image or the code snippet below, but without the annoying thin blue flashing offset below the item. Pulling my hair out for hours, I'm not able to make the orange element the exact same height as the navigation bar.

Note: Since the HTML comes from a CMS, I can't alter the HTML itself. So if you answer the question please make sure to post a CSS-only solution.

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

nav {
  display: block
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1d2125;
  text-align: left;
  background-color: #fff
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important
}

ul {
  margin-top: 0
}

a {
  color: #0096d2;
  text-decoration: none;
  background-color: transparent
}

a:hover {
  color: #005f86;
  text-decoration: underline
}

button:focus:not(:focus-visible) {
  outline: 0
}

button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

button {
  overflow: visible
}

button {
  text-transform: none
}

button {
  -webkit-appearance: button
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer
}

button::-moz-focus-inner {
  padding: 0;
  border-style: none
}

 ::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
  color: #1d2125;
  background-color: #ced4da;
  border-color: #ced4da
}

.dropdown {
  position: relative
}

.dropdown-toggle {
  white-space: nowrap
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #5babf2
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: #8bc3f6;
  border-color: #8bc3f6
}

.nav {
  flex-wrap: wrap
}

.nav-link {
  padding: 0.5rem 1rem
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 1rem
}

.navbar-brand {
  padding-top: 0.32421875rem;
  padding-bottom: 0.32421875rem;
  font-size: 1.171875rem;
  line-height: inherit;
  white-space: nowrap
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none
}

.navbar-nav {
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start
}

.navbar-expand .navbar-nav {
  flex-direction: row
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9)
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9)
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.6)
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.9)
}

.bg-white {
  background-color: #fff !important
}

.border-0 {
  border: 0 !important
}

.d-none {
  display: none !important
}

.d-md-flex {
  display: flex !important
}

.align-items-center {
  align-items: center !important
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030
}

@supports (position:sticky) {}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal
}

.m-0 {
  margin: 0 !important
}

.my-1 {
  margin-top: 0.25rem !important
}

.my-1 {
  margin-bottom: 0.25rem !important
}

.mr-4 {
  margin-right: 1.5rem !important
}

.p-0 {
  padding: 0 !important
}

.py-0 {
  padding-top: 0 !important
}

.py-0 {
  padding-bottom: 0 !important
}

.px-1 {
  padding-right: 0.25rem !important
}

.px-1 {
  padding-left: 0.25rem !important
}

.mx-auto {
  margin-right: auto !important
}

.mx-auto {
  margin-left: auto !important
}


 :target {
  scroll-margin-top: 70px
}

html,
body {
  height: 100%
}

#page-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column
}

.navbar.fixed-top {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: #dee2e6 1px solid;
  align-items: stretch;
  height: 61px
}

.navbar.fixed-top .nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap
}

.moremenu.observed {
  opacity: 1
}

.moremenu .nav-link {
  border-right: none;
  border-bottom: solid 3px transparent;
  border-left: none
}

.moremenu .nav-link:hover,
.moremenu .nav-link:focus {
  border-color: transparent;
  background-color: #f8f9fa
}

.moremenu .nav-link.active {
  background-color: #f8f9fa;
  border-color: transparent
}

.moremenu .nav-link.active:focus,
.moremenu .nav-link.active:hover {
  background-color: #f8f9fa;
  border-bottom-color: #0f6cbf
}

.moremenu .nav-link:focus {
  position: relative
}

.moremenu .nav-link.active {
  background: transparent
}

.primary-navigation .navigation {
  height: 60px
}

.primary-navigation .navigation .nav-link {
  height: 60px;
  border-top: 3px solid transparent
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}


.primary-navigation .navigation .nav-link.active {
  color: white
}

.primary-navigation .nav-item .nav-link {
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff
}

.primary-navigation li.nav-item a.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 14px;
  height: 2px;
  left: 0;
  right: 0;
  margin: 0 0.5em;
  background-color: #ffffff
}

.navbar .dropdown-toggle,
.navbar .nav-link {
  color: #fff !important
}

.navbar {
  background: #003ca0 !important;
  border-bottom: none !important
}

.navbar .nav-link:hover {
  background: #e47e08 !important
}

.navbar .nav-link.active,
.navbar .nav-link.active:hover {
  border-bottom-color: transparent
}

<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>example navigation</title>

<body id=page-my-index class="limitedwidth page-mycourses format-site path-my gecko dir-ltr lang-de yui-skin-sam yui3-skin-sam vorabversion-uebergangs-moodle-atidia-de pagelayout-mycourses course-1 context-1 editing uses-drawers jsenabled has-region-content used-region-content has-region-side-pre empty-region-side-pre">
  <div id=page-wrapper class=d-print-block>
    <div> <a class="sr-only sr-only-focusable" href=#maincontent>Zum Hauptinhalt</a> </div>
    <nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label=Site-Navigation>
      <div class=primary-navigation>
        <nav class="moremenu navigation observed">
          <ul id=moremenu-63e7e823a2eea-navbar-nav role=menubar class="nav more-nav navbar-nav">
            <li data-key=home class=nav-item role=none data-forceintomoremenu=false> <a role=menuitem class=nav-link href="" tabindex=-1> Start </a> </li>
            <li data-key=myhome class=nav-item role=none data-forceintomoremenu=false> <a role=menuitem class=nav-link> Dashboard </a> </li>
          </ul>
        </nav>
      </div>
    </nav>
  </div>

Answer 1

A quick fix would be to set the height of the nav link items to be the same with the navbar:

.navbar.fixed-top {
  height: 61px; /* <- Since this is set to 61px... */
}

.primary-navigation .navigation {
  height: 60px; /* <- Before */
  height: 61px; /* <- After: set this also to 61px */
}

.primary-navigation .navigation .nav-link {
  height: 60px; /* <- Before */
  height: 61px; /* <- After: and this one... */
  border-top: 3px solid transparent
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

nav {
  display: block
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1d2125;
  text-align: left;
  background-color: #fff
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important
}

ul {
  margin-top: 0
}

a {
  color: #0096d2;
  text-decoration: none;
  background-color: transparent
}

a:hover {
  color: #005f86;
  text-decoration: underline
}

button:focus:not(:focus-visible) {
  outline: 0
}

button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

button {
  overflow: visible
}

button {
  text-transform: none
}

button {
  -webkit-appearance: button
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer
}

button::-moz-focus-inner {
  padding: 0;
  border-style: none
}

 ::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
  color: #1d2125;
  background-color: #ced4da;
  border-color: #ced4da
}

.dropdown {
  position: relative
}

.dropdown-toggle {
  white-space: nowrap
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #5babf2
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: #8bc3f6;
  border-color: #8bc3f6
}

.nav {
  flex-wrap: wrap
}

.nav-link {
  padding: 0.5rem 1rem
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 1rem
}

.navbar-brand {
  padding-top: 0.32421875rem;
  padding-bottom: 0.32421875rem;
  font-size: 1.171875rem;
  line-height: inherit;
  white-space: nowrap
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none
}

.navbar-nav {
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start
}

.navbar-expand .navbar-nav {
  flex-direction: row
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9)
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9)
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.6)
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.9)
}

.bg-white {
  background-color: #fff !important
}

.border-0 {
  border: 0 !important
}

.d-none {
  display: none !important
}

.d-md-flex {
  display: flex !important
}

.align-items-center {
  align-items: center !important
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030
}

@supports (position:sticky) {}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal
}

.m-0 {
  margin: 0 !important
}

.my-1 {
  margin-top: 0.25rem !important
}

.my-1 {
  margin-bottom: 0.25rem !important
}

.mr-4 {
  margin-right: 1.5rem !important
}

.p-0 {
  padding: 0 !important
}

.py-0 {
  padding-top: 0 !important
}

.py-0 {
  padding-bottom: 0 !important
}

.px-1 {
  padding-right: 0.25rem !important
}

.px-1 {
  padding-left: 0.25rem !important
}

.mx-auto {
  margin-right: auto !important
}

.mx-auto {
  margin-left: auto !important
}


 :target {
  scroll-margin-top: 70px
}

html,
body {
  height: 100%
}

#page-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column
}

.navbar.fixed-top {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: #dee2e6 1px solid;
  align-items: stretch;
  height: 61px
}

.navbar.fixed-top .nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap
}

.moremenu.observed {
  opacity: 1
}

.moremenu .nav-link {
  border-right: none;
  border-bottom: solid 3px transparent;
  border-left: none
}

.moremenu .nav-link:hover,
.moremenu .nav-link:focus {
  border-color: transparent;
  background-color: #f8f9fa
}

.moremenu .nav-link.active {
  background-color: #f8f9fa;
  border-color: transparent
}

.moremenu .nav-link.active:focus,
.moremenu .nav-link.active:hover {
  background-color: #f8f9fa;
  border-bottom-color: #0f6cbf
}

.moremenu .nav-link:focus {
  position: relative
}

.moremenu .nav-link.active {
  background: transparent
}

.primary-navigation .navigation {
  height: 61px
}

.primary-navigation .navigation .nav-link {
  height: 61px;
  border-top: 3px solid transparent
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}


.primary-navigation .navigation .nav-link.active {
  color: white
}

.primary-navigation .nav-item .nav-link {
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff
}

.primary-navigation li.nav-item a.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 14px;
  height: 2px;
  left: 0;
  right: 0;
  margin: 0 0.5em;
  background-color: #ffffff
}

.navbar .dropdown-toggle,
.navbar .nav-link {
  color: #fff !important
}

.navbar {
  background: #003ca0 !important;
  border-bottom: none !important
}

.navbar .nav-link:hover {
  background: #e47e08 !important
}

.navbar .nav-link.active,
.navbar .nav-link.active:hover {
  border-bottom-color: transparent
}

<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>example navigation</title>

<body id=page-my-index class="limitedwidth page-mycourses format-site path-my gecko dir-ltr lang-de yui-skin-sam yui3-skin-sam vorabversion-uebergangs-moodle-atidia-de pagelayout-mycourses course-1 context-1 editing uses-drawers jsenabled has-region-content used-region-content has-region-side-pre empty-region-side-pre">
  <div id=page-wrapper class=d-print-block>
    <div> <a class="sr-only sr-only-focusable" href=#maincontent>Zum Hauptinhalt</a> </div>
    <nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label=Site-Navigation>
      <div class=primary-navigation>
        <nav class="moremenu navigation observed">
          <ul id=moremenu-63e7e823a2eea-navbar-nav role=menubar class="nav more-nav navbar-nav">
            <li data-key=home class=nav-item role=none data-forceintomoremenu=false> <a role=menuitem class=nav-link href="" tabindex=-1> Start </a> </li>
            <li data-key=myhome class=nav-item role=none data-forceintomoremenu=false> <a role=menuitem class=nav-link> Dashboard </a> </li>
          </ul>
        </nav>
      </div>
    </nav>
  </div>