Fixing Hover Line in Navigation

Store Design
, , , ,
1

Here is the preview link: https://skis-on-the-run.myshopify.com/?_ab=0&_fd=0&_sc=1

We added some custom CSS to the Reserve Now link to have it look more like a button, but the hover line is not working properly, it’s high up and in full screen, cutting off the word. Here is the CSS we added:

/* Style the "Reserve Now" link in the navigation */
.navigation__link[href*="rent"] {
  background-color: #0a3159;
  color: #ffffff;
  border-radius: 2px;
  padding: 0.5rem 1rem;
  text-decoration: none; /* border-radius: 4px; /* Rounded corners */
  text-transform: uppercase;
  margin-block: 1rem 1rem; /* Add vertical margin */
  margin-left: 1rem; /* Add left margin */
}
2

Please add this additional CSS code to fix that issue

.navigation.navigation–tight-underline .navigation__tier-1>.navigation__item:last-child>.navigation__link:before {

bottom: 8px

}