Bootstrap 4 Nav-Links Height

Question

How can I customize the height of the nav-links in Bootstrap?

website: www.mastertraf.net If I set a height, it does not take the full height of the navbar.

CSS CODE:

  .navLogo {
    width: 15%;
    height: 100%;
   }

  .navbar {

 }

.navbar-dark {
 background-color: rgba(0, 0, 0, 0.5);
}

  .navbar-dark .navbar-brand {
  color: #000000;
   }

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
color: #000000;
 }

.navbar-dark .navbar-nav .nav-link {
  color: #000000;
  -webkit-transition: background-color 0.5s ease-out;
 -moz-transition: background-color 0.5s ease-out;
 -o-transition: background-color 0.5s ease-out;
 transition: background-color 0.5s ease-out;
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-   link:focus 
{
 color: #FFFFFF!important;
  background-color: rgba(0, 0, 0, 0.5);
 border-bottom: 2px solid #FF8401;
}

 .navbar-dark .navbar-nav .nav-link.disabled {
  color: #000000;
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
 border-bottom: 2px solid #FF8401;

 }

 .navbar-dark .navbar-toggler {
 color: rgba(255, 255, 255, 0.5);
 border-color: rgba(255, 255, 255, 0.1);
 }

.navbar-dark .navbar-toggler-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }

.navbar-dark .navbar-text {
 color: #000000;
}

.navbar-dark .navbar-text a {
color: #000000;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
color: #000000;
}

Create a working demo here or create a fiddle for your problem. — ata, Feb 13 '18 at 19:42
I just want to know how to set a height for the nav-links. Why i need to create a fiddle for this? You either know it or not. — Nickola Stoykov, Feb 13 '18 at 19:48

score 1 · Answer 1 · answered Feb 15 '18 at 04:11

you just need to focus on nav-link padding:

.navbar-nav .nav-link{
padding:.5rem 1rem;
}

This is what initially it looks. If you want to increase the height appearance. Just. play with padding: /*yourvalue*/.rem 1rem;

It is not good practice to set height for navbar. Since while collapse the navigation bar wont show any menus. If the value was fixed width.

Bootstrap 4 Nav-Links Height

1 Answers1