Flex responsive nav with toggle

HTML & CSS
1

Hi Im working on creating a navbar with two toggles. I have come far but im stuck so some help would be much appreciated.

Here is my pen for this project.

Im wondering how I would go about making the toggle menu to display the items correctly. at this point its all a mess .

Any help whatsoever as im real confused at this point.

Frederik

2

Have you forgotten something :winky:

coothead

3

ouch sorry I had to go out pick up my daughter forgot to include the link:)

I’ll update post #1

Edit:
For some reason the responsiveness is not working in this pen but its working flawlessly in chrome :confused: hmmmm

Edit2:: almost looks same as in my browser now…

4 
<a href="javascript:void(0);" onclick="toggle_menu()">

It looks like you are trying to use javascript to toggle the menu. But there is no javascript in that pen.
Are you specifically looking for a javascript solution, if so this can be moved to that forum.
Also your toggle button isn’t currently visible with no content.

5

Hi sorry please check the pen again everything should be visible at this point .

Are you specifically looking for a javascript solution, if so this can be moved to that forum.

  • No it doesn’t have to be a js solution and I’m not sure this is a javascript problem as the .js is working.But I would need help to organize the toggle menu with css when the toggle menu is open but i’m not sure how I will fix it …
6

OK, it has the javascript now and the toggle is visible and working.

The next task is to define “correctly”.

7

Well if you click the toggle button at this point it will be totally messed up.

The overall goal is that the links should be displayed under the first row when toggle button is pressed.
“The Brand” should be in Center of the top row next to toggle
The user icon should go to the right in the top row and will later (when I can get this to work) function as a 2nd toggle menu for login, logout and register

8

To put the menu below the other content you will need to enable wrapping on the flex parent
.nav-wraper { flex-wrap:wrap }
This will allow a new row to be used.

To force the menu onto the new row of its own increase its width using flex basis.
.navbar__ToggleShow { flex-basis: 100% }

9

Hi thanks for your reply and help . I tried to implement your suggestion but I think I somehow got it wrong . I have updated the pen with the changes…

10

Here is a fork with the changes commented.

11

that is great thanks . you sure are a genius with this. Could you please also make the brand and the links be centered . Looks a little strange now but much better then before

12

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