There is somthing wrong with my code. I dont understand what the problem is.😑

Question

I wrote some code. It worked fine on desktop. Then i tried to make it responsive. But there is a problem while responsive to navbar, which i dont understand. Can anyone help me with this🤔
https://code.sololearn.com/WthciGvhmmPC/?ref=app

Answer 1

Add a media query for smaller devices

@media (max-width: 60em) {
nav {
flex-direction: column;
}
}

Also, in your nav rule set, change
height: 10vh;
to
min-height: 10vh;

Answer 2

RKK can you please explain what i should do? i dont understand what you mean.🤐

Answer 3

Qurban Hussain it cant fit all that in a mobile screen's width so add a media query for smaller screens where u specify that u want flex-direction: column; for smaller widths so that instead of remaining lke this ■■■
They become like this at smaller screens:
■
■
■
check this:
uncomment flex-direction to see the difference.
https://code.sololearn.com/WKgtmOJyw5Nf/?ref=app

Answer 4

Bro, the structuring of ur html document is really complicated :(. But aside from that:
Use this:

header nav {
display:flex;
flex-direction:column;
}

and increase the height of your header from 10vh.

Answer 5

maybe something like in this link...
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

just like most websites out there in the internet, having a hamburger menu (bars) on small screens.

Answer 6

RKK yes bro i want to do that but i used a FlexBox in NAV but now that FlexBox is bothering me i dnt knw what to do now🤐

Answer 7

i'll try🙃👍

Answer 8

harikethan
Thanks bro it is very informative for me.

as u said i should add a button in the bars div where i added a hamburger icon. am i right

yeah i am already trying to get grip on flrexbox.

your answer cleared my mind of what i whould do with this code.
thanks once again❤👈

Answer 9

Я видел еще несколько русских здесь😃

thank you google 😅

Answer 10

RKK sure btw thanks

Answer 11

benjamin open the code uncomment last media query that is on 782px and then check and also the problem is on 782px resolution🤷‍♂️

Answer 12

benjamin bro in simple way i want my nav menu items in bars at 782px like normaly navbars for mobile devices so i'm trying to give 100% width and height to nav menu items but it didnt work🤐

Answer 13

maf bro i already try this flex-direction:column but it didnt work😷the items still in row style🤐

Answer 14

If you are unable to change the values and make it work as i mentioned. just leave a reply i will share the changed code. I just wanted you to try tats it :)

Answer 15

Qurban Hussain your welcome bro. : )

Answer 16

Я один сдесь русский человек 👨?

Answer 17

Ore thnaks alot bro🥰👈

Answer 18

Артём i translated your sentence, and i think yes xD

Answer 19

Visit my page

Answer 20

Yes it True