Vertical align doesn't work in button div

Vertical align doesn't work in button div


In following example the navigation menu resizes to a pushdown navigation menu when resized.

But the navigation elements are aligned horizontally, whilst they should be vertically aligned. Any idea how to get this right?


vertical-align does not play nice with grid. :frowning_face:

Very basic example of something that should work.

Simply have one column for small screen and multiple columns for larger. Change the width of window to see them stack.

Also included similar for flexbox which I find to be easier for things like this that are in one direction only.


Set the ul to display block inside your max-width: 400px media query

[aria-expanded="true"] ~ ul {
  max-height: 500px;
  transform: rotateX(0);
  display: block;
  padding: 0;
// Give the links some space
// this selector is not great, you should have li's as children of the ul
// divs are not valid children of the ul element.
#menu-list > * {
  margin-bottom: 20px; 

// With a correct HTML structure you would do this instead.
#menu-list > li {
  margin-bottom: 20px; 

Note: As for the actual vertical-align CSS property, it only applies to inline and table-cell elements.


How should I structure the html? I tried something with ul and li’s but it did not change anything…


This example it works. BUT two awkward things happen.

  1. When clicking the button the text goes back horizontally before disappearing.
  2. when clicking on the button controls the it doesn’t work when clicking next to it does work. To be user friendly it should work with both right?