Highlighted

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

Enthusiast ,
Sep 09, 2018

Copy link to clipboard

Copied

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.

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.

Views

205

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Enthusiast ,
Sep 09, 2018

Copy link to clipboard

Copied

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.

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.

Views

206

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 09, 2018 0
Mentor ,
Sep 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 09, 2018 1