Mobile Menu - - is a mess

HTML-CSS
1

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

Screenshot 2022-04-15 at 13.43.54
Screenshot 2022-04-15 at 13.43.54854×388 62.9 KB

2

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
3

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

4

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?

5

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

6
7

with javascript

8

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

9

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

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.