Jump to content
Sonalk

Help with dropdown menu for mobile

Recommended Posts

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

Share this post


Link to post
Share on other sites
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 by Sonalk

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...