Streaming live at 10am (PST)

Moving Page Elements On Mobile?

#1

I’m currently building a website for a client that has 3 navigation bars (it’s a pretty large website) and I’m trying to find a way to re-arrange some of them on mobile. Specifically on desktop, there is a top and bottom navbar in the header as well as a side navbar on individual pages that provides deeper navigation. On mobile, I am trying to hide the bottom navbar in the header and replace it with the side nav bar according to whatever page is being displayed. As of now, when I drag-and-drop the side navbar into the header, it does it on desktop too which I don’t want to happen. Is there a way to just re-arrange elements on mobile? I know flexbox allows for re-arrangement but I don’t think that can apply in a situation like this.

My read-only link is shared below. An example page would be “what we do…and why” in the pages tab. Thanks in advance :slight_smile:


https://preview.webflow.com/preview/swiig?utm_source=swiig&preview=90e79abfa8da241a2e14a8a558e2d326

#2

I can’t see your preview right now because I’m on mobile , but here’s what I think you should have in mind

Css stands for Cascading Style Sheets… it messes with how things look or if they appear at all. The changes that you’re making affect the content of your page , and that is HTML business. What you gotta do is leave the unwanted navbar in the desktop as well, but set its display to none, so it won’t show up. The same applies to unwanted navbars on smaller devices. Leave it there, but set its display to none.

I hope it helps, have a great day

#3

Thank you @Jeandcc for the reply, I actually figured out a solution not too long after posting that is along the same lines as what you said. I recreated a new navbar that only displays on mobile and hid the desktop navbar from mobile devices instead :slight_smile: works great but kind of annoying because it obviously makes things more complex but sometimes it can’t be avoided.

1 Like