Building a responsive nav bar from 2 rows to 1 row

[Kyle_Picone (James_White)]

Hello all,

I am building a website where the header design is as follows:

On desktop:
— row 1 has the logo, a dropdown, and a CTA button
— row 2 has four nav links

On tablet and below:
— row 1 has the logo and and a hamburger icon, which includes the six hyperlinks mentioned up above.

You can see the intent in Figma here:

Desktop:

Mobile:

I am really scratching my head on how to build this. I have looked at various forum posts on the matter of a double row nav bar, but I still cannot figure it out / slash I am not sure if I’m even building it correct.

Preview site here.

Any help at all about structure would be GREATLY appreciated.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[zafremedia]

hello, @Kyle_Picone ,
In this example i think you shoud create 2 rows
in the first row : your logo, cta button, a dropdown, burgermenu & hamburger button(both “display: none” in desktop)
and in the second row your four nav links

in laptop you should give “display: none” to elements that are not in header like:
your second row, your cta button and your dropdown
and give “display: block” to elements that you need them in your header like:
hamburger button
for hamburger meu you should create an click animation for hamburger button
and open/close hamburger menu with that button.