Why appears a bit hiddenpart of these ul on vertical nav bar? I'm using flexbox

[rooibos]

Hi everybody.
I’m trying to make something really (I guess) easy for my poor knowledge in this theme.
It’s about a vertical menu navigation for my future? web portfolio.

I have two ul in vertical rotation in the same container (header) and my goal is that first one be on top and the second on bottom part without part of them hidden.
Am I doing too much thing wrong?

Maybe there another better way to get this.

This is the code (I’m sorry if I’m linking it in the bad way). Thanks

See the Pen Problems with Vertical menu bar with flexbox by Chris (@chrisdgallego) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

[AsGYakimov]

Why are you uls rotated? It’s hard to read them and to navigate. If you remove this rotation and remove display: flex on the uls or make their flex-direction: column, it will be ok.

[Paulie_D]

Indeed, It’s really hard to see what it is you are trying to achieve.

Do you have an image of what this is supposed to look like?

[rooibos]

Hi AsGYakimov. I just design (on paper) a interface and I saw some webs with this kind of navigation and some cases I like it and wanna try it.
Yes, I agree about the reading of these menus with those colors and the font in the exaple but I think with nor more than 3 links and the right font and color could be work.

Something like this I think does not look bad.

[rooibos]

Hey Paulie_D.
Something like this:

http://www.vr-sessions.com/

In my case I wanna try to control the position of each ul.
Just imaging the icons bar on this web to the left with just two icons, the home one and the shop one, same position. Just replace them by ul.

Now I know once I rotate uls I have to change something like the center’s coordinates? I wrote it in a paper but now I’m not in front of that note.

[Paulie_D]

There’s a lot of very precise absolute positioning going on in the example site….I’m not sure you want to go down that road.

You’d need to know the exact widths of the UL to be able to pull it off.

Frankly, I think it’s poor UX and design.

[Author]

Posts