CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Matt Backslash
Matt Backslash

Reputation: 804

Bootstrap display flex height

I want to make my navigation list from bootstrap in the same height as the navbar itself.

Current html:

<nav class="navbar navbar-expand-lg">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link"></a>
            </li>
        </ul>
    </div>
</nav>

Which comes out like this:

enter image description here

I want to make it look like this:

enter image description here

I currently fixed it by giving the div.collapse a fix height of 60 pixels and ul.navbar-nav.mr-auto, li.nav-item and a.nav-link a height of 100%. The problem is that this is only a workaround and will not work for mobile devices etc.

By checking out the css I recognized that bootstrap is now using a method called flex. How can I make that possible using flex?

Upvotes: 0

Views: 104

Answers (1)

Taki
Taki

Reputation: 17654

if you want to leave the default height then removing the padding-top and padding-bottom from the parent ( nav-bar ) and adding them to the children ( nav-link ) will do the trick,

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
  }
}

if you fix the height of the nav-bar then why not just fix the height of the children ?

.nav-bar{
    height: 60px;
}

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
    height: 60px;
  }
}

another option is to set the position of the parent ( nav-bar ) to relative and the position of the children to absolute and height:100% with top:0

.nav-bar{ 
    height: 60px;
    position: relative;
}

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
    position: absolute;
    top: 0;
    height: 100%;
  }
}

here's a fiddle : https://jsfiddle.net/szuk7not/62/

PS : for your future questions, please consider adding a snippet, codePen, fiddle or at least working html and css so you can get more precise and adequate answers.

Upvotes: 1

Related Questions