Mobile nav bar
Hi guys i have a space between my header and navbar on small screens.
How can i make it like the picture or whats going wrong?
https://codepen.io/Boeroe/pen/xxMgrxz
9 Replies
your .navbar is a <ul> that has default padding and margin. set those to 0
Margin to 0 did it yes. Sometimes it can be so easy haha. And why is my text horizontal and not vertical?
When i do that that navbar is getting on the whole page. So not like the first picture
That's because you gave a big margin
because your ul.navbar has display flex. by default flex has flex-direction: row,
if you want to change it for mobile, do flex-direction: column in your media query
It worked yes, i deleted the margin aswel so its not that big. Only my hover effect is all over the place now @C_7
There is a difference between these two ways of writing.
The reason for this problem is that the box element will occupy a full line by default.
It is recommended to add this at the beginning of the code
It worked, i used method 2. But what is fit-content really doing