Search code examples
cssmobilenavbarnavsquarespace

Separate Nav Bar for Mobile in Squarespace

I have a folder in my nav bar, which works great on desktop.enter image description here

However, it doesn't work well on mobile. I need a way to have just the nav links that are in the drop down menu folder on mobile. enter image description here

My goal is to have the folder (and then drop down menu) on the desktop nav bar, but only the links in the mobile nav bar slide-in menu.

This probably requires separate Nav bars for desktop and mobile.

Any suggestions? I am up for any code injections, or custom codes that will accomplish something like this.

My template is Mojave.

Solution

  • The usual way to have independent desktop and mobile navigations in Squarespace is to add all of the folders, pages and links to the navigation and then hide and show them with CSS based on your needs.

    In other words, add both the folder with the pages and links to the pages (outside the folder) to your navigation. Then use CSS to hide the links outside the folder on desktop, but hide the folder (and not the outside links) on mobile.

    For example, see this Mojave demo here which uses the following CSS, inserted via the CSS Editor:

    .Header-nav .Header-nav-item[href="/page-1"], .Header-nav .Header-nav-item[href="/page-2"] {
  display: none;
}

[data-nc-base="mobile-bar"] [data-controller-folder-toggle="folder-1"] {
  display: none;
}

    In the code above, the first rule targets the desktop header navigation as well as the non-folder-links within it that have the URLs "/page-1" and "/page-2". The second rule targets the mobile navigation, and further targets the folder with the URL "/folder-1".

    You would of course alter the CSS (specifically, the URLs within it) for your page URLs.

    Here's an image showing the navigation setup in the back-end of Squarespace. Note that you could instead put the links in the folder and the pages outside of it...either way will work.

    Squarespace navigation example