Hello, we are very new in Webflow. We are trying to create a navigation panel which will have two sets of menus on each side of the panel but in mobile view they will collapse in a single dropdown menu, leaving the brand logo.
Please see the attached images for more clarity
We haven’t started the design. This is the very first thing to create in our site, so there is no live link.
Hey there @witbybit. Welcome to the Webflow forums 
What you are wanting can be easily achieved using flexbox. Specifically, by using justify-content: space-between;.
Have you watched the Webflow university videos? I recommend you start with them -
EDIT: I should also add - Webflow provides you with an already pre-built Navbar component that you can just drag and drop into your project. You can find out more about this by clicking here. Also, here is a tutorial by @MackenzieChild on how to customise this Navbar component further.
Thank you. We checked the tutorial out but these are dealing with one menu and one brand block. We are dealing with two menus.
@witbybit forgive me if I misunderstood, but how are you dealing with two menus?
From the screenshots in your original post, there appears to be 1 brand block on the left, followed by 3 page links. Then on the right, there is 1 page link and a button. All of which shrinks to a hamburger menu on mobile devices.
This can all be placed inside of 1 Navbar component. So I’m not sure what you mean by -
We are dealing with two menus.
You are right, but we initially made two divs with list items and floated those divs left and right. One of the list item is supposed to have sub menu as well. So we are kinda confused how to structure this.
There is no need to use floats for this layout.
Start with a div block, 100% width. Make it flexbox and set its direction to horizontal.
Inside this div block, place 2 more div blocks. Inside one of the div blocks, place your brand and the 3 page links. Then in the other div block, place your ‘Sign In’ link and ‘Request Demo’ button.
Then, you have two options for making these 2 children div blocks ‘push’ to either side of the parent div block…
You can either do it using the justify-content: space-between property on the parent div block, like I mentioned earlier.
Or, you can select the child div block which is housing your ‘Sign In’ link and ‘Request Demo’ button and give it a left margin of auto to push it to the right-hand side of the parent div (see the tutorial I linked to earlier by Mackenzie, as this is the method he walks through in the tutorial).
Unfortunately, I don’t have any project space left in my account, so I can’t make a demo for you. Do you have a read-only link to a project you have started? I could make it for you there and screenshot the layout structure for you.
Oh thank you very much. That’s very kind of you but I figured it out now. It works now. Thanks a lot. 
