Moving menu elements based on viewport?

[mark5]

I’ve most likely overworked this, but I’m sure there is a more straightforward solution.

I have two of the same menu elements, one for larger breakpoints and the other for more minor breakpoints. I want the orange menu and search feature to be center-right justified on larger viewports.

I want the blue menu and search to appear below the green bar and logo. The blue bar needs to be full width on smaller viewports.

Is there an easier way that I’m overlooking? I’ve spent way more time on this than it should take.

[tristup]

Hi @mark5,

The website can’t be accessed due to the folder restrictions. I would suggest you share the credentials for that in the secure note for further assistance.

Thanks

[prakash_s]

Hello @mark5,

The given credentials for the security login are not working on my end. Please recheck and send us again.

Thanks

[mark5]

We’ve removed the access block. Please try again.

[ruenel]

Hello Mark,

The “Hide During Breakpoints” option must be used in the Container elements.

And then in your Bar element Flexbox settings, you can play around with the Horizontal alignment.

Kindly let us know how it goes.

[mark5]

Ok, I’ve made edits, however I can’t get the nav in blue to drop below the green row/bar in a smaller viewport.

[prakash_s]

Hello @mark5,

I went ahead and cloned your Header Bar( Themeco test Header Bar)and moved the Nav bar, I have kept the Header hidden for all screens you need to go to your Header unhide it from the breakpoints settings, and check the settings.

Hope it helps
Thanks