Navbar on different devices

Hi there,

Is there anything I can do to make changes on navbar only for tablet/phone view without affecting desktop view?

I had like the Navbar to be displayed differently depending on the device (desktop, tablet and phone).

The navbar to looks good in desktop view, but navlinks are all disorganised in tablet/phone view. I had like all the navlinks to align in the centre and I also want to get rid of one of the navlink only for the tablet and phone - not for the desktop view.

I tried changing the alignment and everything using tablet mode but it affects desktop view when I make any changes on the tablet.

I did my research and someone mentioned about using “conditional visibility” but I can’t find the setting in Element Setting section (D).

Other person told me to "create all the navbar in the desktop version which will create the structure. Then, starting from desktop you adjust the CSS, the style, from the right panel. This can be different on different devices. Style the desktop navbar from desktop and you set the other as display none.
Then go on tablet, set the navbar you don’t need as display none, set the navbar you want as display block (or whatever you need) and style it. And so on for landscape and mobile.”

I don’t know what it means by "Style the desktop navbar from desktop and set the other as display none.”.

What would be the correct way to do it?

Thank you in advance!


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

Hi Angie,

Yeah nav’s can be tricky to learn when starting out.

I can take a look for you, and try to explain the best way to achieve what you are looking for, but first can you send your read-only link. And I can get in and look for you?

Best regards,

Steve | 3SIX5 Digital

Hi!
Thank you for your reply.
This is the link for you to look at:
https://preview.webflow.com/preview/my-first-project-23bec9?utm_medium=preview_link&utm_source=designer&utm_content=my-first-project-23bec9&preview=d91f0603c508124003e258b5023c419b&mode=preview

Thank you

Hi Angie,

Right I see what you have done, and I have found an easy fix for it. I have attached a link to a 2 min video showing you how to achieve the stacked result.

If you want them left aligned, just skip the step when I centre align them and you are all set!
Nav Alignment

Let me know if you get stuck and I’ll try and help out!

Best of luck,

Steve | 3SIX5 Digital

1 Like

Amazing! Thank you so much for your help!
Looks like I figured it out after watching your video.
I really appreciate you for taking the time to create the video.

Thanks again!

1 Like

That’s great Angie!

Glad to help out, and hope you have fun building out the rest of the site!

Tag me in the future if you have any small issues you need help with and I’ll do my best to help out!

Best of luck,

Steve

1 Like