Skip to main content
R
r_tist
Inspiring
September 9, 2018
Answered

navbar buttons with flex container, how to make equal height?

  • September 9, 2018
  • 1 reply
  • 501 views

Hi,

The buttons were equal height until I changed the text on one that forced it to wrap to a 2 liner. The buttons are still balanced out, but their background boxes are now all different heights compared to the 2 liner.

I will need it so the 1 line button link's background boxes have the same height as the 2 liner.

.btn-nav-flex-container {

  display: flex;

  vertical-align: middle;

    align-items: center;

}

.btn-nav {

    background-color: #ccc;

    border: 2px solid #ccc;

    color: #000;

    padding: 1px 22px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    width: 30%;

    font-weight: 600;

    margin: 9px 2px;

    border-radius: 14px;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    cursor: pointer;

}

What would you suggest in this case? Thank you.

    This topic has been closed for replies.
    Correct answer ALsp

    You need to put an actual test page on the web and post a link, but in theory, when using flexbox for a menu, the element that will be equal in height, given links that wrap (not a good idea) would usually be the LI. To test that, assign a background color to the LI.

    For a professionally coded flexbox menu from which to cull inspiration:

    Maxi Menu Magic

    That said, you need to decide between Flexbox and inline-block. They have vastly different results. Normally, for a horizontal menu you would use Flex for the LIs and the links would be display block.

    1 reply

    ALsp
    ALspCorrect answer
    Legend
    September 9, 2018

    You need to put an actual test page on the web and post a link, but in theory, when using flexbox for a menu, the element that will be equal in height, given links that wrap (not a good idea) would usually be the LI. To test that, assign a background color to the LI.

    For a professionally coded flexbox menu from which to cull inspiration:

    Maxi Menu Magic

    That said, you need to decide between Flexbox and inline-block. They have vastly different results. Normally, for a horizontal menu you would use Flex for the LIs and the links would be display block.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices