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?

https://codepen.io/QDW/pen/jQgExG

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.

1 Like

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?

Thanks!!!

  1. First, remove the default padding on the ul, add this selector outside of your media query. Because of the “transition: all” the menu list will slide a bit otherwise.
.menu ul {
  padding: 0;
}
  1. Now move the display: block from the “[aria-expanded=“true”] ~ ul” to the “.menu ul” inside the media query.
.menu ul {
  display: block;
  max-height: 0;
  overflow: hidden;
  transform: rotateX(90deg);
  transition: all 0.5s;
}

[aria-expanded="true"] ~ ul {
  max-height: 500px;
  transform: rotateX(0);
}
  1. Change the JavaScript to use the event.currentTarget, I have assigned it to a target variable just to make it more clear, but you can also just use event.currentTarget.getAttribute(…) instead.
const navButton = document.querySelector("button[aria-expanded]");
function toggleNav(event) {
  const target = event.currentTarget;
  const expanded = target.getAttribute("aria-expanded") === "true" || false;
  navButton.setAttribute("aria-expanded", !expanded);
}
navButton.addEventListener("click", toggleNav);