0

I'm trying to build a menu where the link items run at a 90degress angle. You'll see what I mean when you load the codepen

https://codepen.io/anon/pen/BbQEPb

The problem I'm having is; even though I set the navigation drawer to "block" and the v-list items as "inline-block", They are still side by side, not stacking at that 90 degree angle down the navigation drawer.

This is what I'm trying to do

This is the CSS I've used to try and emulate that menu, but I just can't get the stack right and my CSS skills aren't that grand yet.

  .v-navigation-drawer .v-list {
    transform: rotate(90deg) translateX(-100%);
    transform-origin: bottom left;
    display: block;
  }
  .v-list > div {
    display: inline-block;
    vertical-align:  center;
    text-align: center;
  }

As usual, I more look for pointers in the right direction rather than completed answers, but happy with either.

Thanks in advance y'all.

Trent
  • 2,909
  • 1
  • 31
  • 46

1 Answers1

0

It turns out the parent needed to be set with nowrap on whitespace

I was simply searching for the wrong answers.

This stackoverflow issue sorted me out Stacking Divs side by side in CSS

Trent
  • 2,909
  • 1
  • 31
  • 46