Mobile Menu - - is a mess

Can somebody put me on the right track regarding a mobile menu?
I would love to have the links stack in a column

Looks like you had the right idea using a flex container and setting the flex-direction property to column, but applied it to the wrong thing:

#myTopnav a {
font-size: 1em;
display: flex;
flex-direction: column;

Should be #myTopnav that’s the flex container, not the anchor elements.

Seems you’ll also need to adjust font-size / padding to make everything fit in the mobile view, as well.

1 Like

Ow wauw that easy I was breaking my head on this lol. Thanks you set me on the right direction :smiley:

Q: I have placed a hamburger icon. I would like to hide the menu by default but show when pressing the hamburgermenu.

can this be done in css or do I need to use Java?

you can do it with css using the checkbox hack. But a few lines of javascript is my preferred method.

with javascript

Thanks for the examples. Start with this in the morning to see how it works and if I can replicate it to fit.

Hi all with your help I am a lot further with the menu but still have some question.

  1. I like have the menu on the right side. I did float right but that breaks up the menu in two ways:
    –a It reverses the menu
    –b The menu gets on top of the menu icon in stead of floating below the bars icon

  2. I have define a style I want to use in the full screen menu not in the mobile menu. Is there a way set the styles without defining the border style and making it transparent? Just removing it wont work