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
  • 508 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 is closed to new replies. Start a new post to keep the conversation going.
    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