Sonalk Posted September 29, 2018 Share Posted September 29, 2018 So I've searched the web and tried for hours now and I'm just giving up. I've this header, and I want it so when you're on mobile it looks like something like this. So when you're on desktop the full menu is in the header and if your're on mobile you get a dropdown menu. Can someone tell me how I do this? Thank you Link to comment Share on other sites More sharing options...
dsonesuk Posted September 29, 2018 Share Posted September 29, 2018 Err? the second link does all that! all you have to do is make the second link design look like the first. Link to comment Share on other sites More sharing options...
Sonalk Posted September 29, 2018 Author Share Posted September 29, 2018 (edited) 1 hour ago, dsonesuk said: Err? the second link does all that! all you have to do is make the second link design look like the first. There's a ton of style parts and I just want to know what part is making the dropdown menu, so I can skip combining those two which doesn't go very well for me. Maybe it's a nooby question I just didn't have enough patience to carefully look into what styling element I could delete, change or copy or whatever I mean isn't it just one segment that makes that mobile thing work? Surely the whole code from link nr 2 cant be needed, would be much simplier to just take that bit and add to the first header, or am I totally wrong? Edited September 29, 2018 by Sonalk Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2018 Share Posted September 30, 2018 Actually yes! it uses CSS media queries to adjust the menu from desktop to mobile version, JavaScript to make hamburger menu open dropdown for all menu links on clicking. You just need keep the same menu layout and include logo, and make to menu items move to right. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2018 Share Posted September 30, 2018 Its just a matter of incorporating the non responsive design into the responsive design. https://www.w3schools.com/code/tryit.asp?filename=FVRO1Q01WQZT Link to comment Share on other sites More sharing options...
Sonalk Posted September 30, 2018 Author Share Posted September 30, 2018 Oh ok, I understand now! Thank you very much! Link to comment Share on other sites More sharing options...
Sonalk Posted September 30, 2018 Author Share Posted September 30, 2018 Just one more question, what is it that is deciding what should be in the dropdown menu, since the "Home" button is outside of the dropdown menu? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2018 Share Posted September 30, 2018 Its still part of the menu, its just all but itself, is hidden .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } Home anchor is first child, and it instructs that it should NOT be included when applying display: none; 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now