Jump to content

How to show a nav folder on desktop but not mobile

Recommended Posts

Is there a way to have a folder in the Navbar(header) on desktop, but have the dropdown values as Top level links on Mobile?

In the first pic I have a placeholder folder called "Start Here", with 2 sub-items, that will appear in the desktop view.

The second pic shows the contents of the mobile hamburger menu. It has 'Start Here' as a clickable item.

The third pic shows the contents once you click on 'Start Here'.

What I'd like to have is for the "Start Here" menu to be flattened on mobile view. So instead of having to click on 'Start Here' to be able to see 'test 1' and 'test 2', just have 'test 1' and 'test 2' on the top level hamburger menu, without the words 'Start Here'.

I came up with a hacky-ish way by creating two sets of menu links. One as a folder and one as top level items. i then hid the entire folder for mobile and hid the top level items for desktop using custom css. It worked but is fragile, especialy if non-techie types are going to be maintaining the site.

I also tried overriding the normal nav links in the desktop, by forcing the hamburger menu to be shown in desktop (also using custom css), but then instead of getting a proper dropdown, a full on hamburger overlay is displayed.

So, in summary, for desktop show this:

Start Here

--test 1

--test 2

Other link

Another link


And for Mobile show this:

test 1

test 2

Other link

Another link


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.