Search the Community

I have created two folders, one I wish to display on the nav bar on desktop and one I want to display while on mobile. Does anyone know what custom CSS is required to display the folders based on screen size? I've found examples online for displaying blocks based on size but nothing related to the navbar folders/links.

I'm using Bedford template and have a folder with two nested pages. I'd like the folder title (in the main nav) to be non-clickable. I've seen this in other templates. Has anyone figured out how to do this in Bedford? (in the images attached, I'd like to make Specializations non-clickable.)

I'm having trouble with changing the active & hover color for a secondary navigation folder. For the primary navigation the active/hover color is red - hsla(0, 82%, 42%, 0.77) but the secondary navigation style is a button which is red with white text. I managed to correct the active color with the code below but I would still like the hover color to be red for the drop down folder items. .Header-nav--secondary .Header-nav-folder-title--active { color: hsl(0, 0%, 100%) !important; } Here is the website: https://gardenia-oboe-ap5s.squarespace.com PW: viewsite Any help is appreciated!

I want to group Menu items under one folder but I don't want the top level item to go anywhere. e.g. Shop Menswear Womenswear Kidswear In that example, Menswear, Womenswear and Kidswear would fly out when the cursor hovers on Shop but if you click on Shop nothing happens. How do I do this??

Hi all, I wanted to share a workaround for hiding the first page in a folder. Since sometime in SS7 they have finally made a folder 'clickable' and automatically link to the first page inside the folder. However (as many of my clients have requested) this is not really what anyone wants because it means your folder name and first page go to the same place - an unnecessary duplication. If you hide your first page in the Not Linked section, the main folder just links to the first visible page again. What you REALLY want is to specify where your folder links to, and then hide that page in the Not Linked section so it doesn't appear inside the folder. However SS doesn't supply a way to custom link the folder and after much searching and trying lots of people's code to link it using Javascript, I really couldn't make this work. The easier way is to use CSS to hide an item in the folder, however I discovered when I hid the first item in the list, it hid the entire subnav. It seems as if the folder name and the first page are tied together in some way that prevents you applying any CSS to the first item in a folder without affecting the whole folder. So my very clunky workaround is this. 1) Add this code to your custom CSS editor (will hide the second item in your folder list) .subnav :nth-child(2) {display: none !important;} You may need to change the '.subnav' depending on your template. I'm using Hayden. 2) Create a new page and make it a 'Link' and drag it inside your folder to the top position 3) Make the link name BLANK by just hitting spacebar once 4) Link that to your 2nd page in the folder You should now have folder that expands to show all your pages except the second page, (which was your original first page). In it's place is a blank link that goes to the same place as the main folder name when clicked. So technically there is still a first page, but visually It creates a blank space at the top of your menu, effectively increasing the clickable area of your menu link. You can possibly explain that away as a design choice and it evens looks a little bit deliberate on mobile. If anyone has a way to do this properly, please let me know. In the meantime I hope this helps someone! Good luck!Dave

Hey, I was wondering if anyone could provide the CSS to decrease the spacing between the site navigation headers and their related drop downs (See attached image, space to be decreased is signified with yellow arrow) Thanks community!

Hi, I have been able to use custom fonts throughout my site. But for some reason it drops from the nav on pages that are folders. Does anyone know how to fix this?

Hi all, I've got a fairly simple, bilingual site set up in ver. 7.1 using two navigation folders, one for each language. I've set the URL slugs to "/eng" (for English) and "/ita" (for Italian). I've also got blogs in each of these folders. Now, I had assumed that the folder's "URL slug" would be added to the complete URL (e.g. ".../eng/blog/article.html" or ".../eng/about.html"), but that doesn't appear to be the case. At least not by default. Is there a way to add this bit to the actual URL in order to separate the files for each language? For now, I've given the Italian blog the URL slug "/blog-it" to distinguish it from the English-language blog (which is just "blog" for now). It seems counterintuitive to me that the URL slug for blogs gets added to the actual URL, but the folder URL slug doesn't. TIA,Grey

Hi, folks - I'm building a site using a Brine child theme. I wanted to make my folder links in my topline nav link to pages (which should be easy to do!) and found that several folks had crafted solutions to this, so that's great! I went with the simple HTML workaround described here, and it's working great. However: I then noticed that on mobile, the folders I've added links to don't expand — they just go to the page I've linked to. (For example: say I have a folder called "Projects." I renamed that folder < a href="/projects" > Projects < /a > ...so that it now links to my "all projects" landing page. On desktop, a user could either mouse over "Projects" to see a list of projects, or click on "Projects" to go to that landing page. However, on mobile, the user can only tap "Projects," which takes you straight to the landing page, and doesn't allow you to see the list of projects that appear in the dropdown on desktop.) My question, then: is there a workaround to make a folder link on desktop but NOT on mobile? I know there are some Javascript-based solutions to the "add a link to your folder" issue (e.g. https://answers.squarespace.com/questions/23951/can-i-link-a-folder-to-a-specific-page.html). Since, well, I'm a complete Javascript noob: is there anything like a @media query for JS? i.e. could I modify that script to say, "if we're collapsed for mobile view, no link!" — or might there be any other ways to address this? Thanks, all!

Click on folder opens blank page with this message: "This folder does not contain any pages." I would like it to open the first page from the folder itself. Any advice greatly appreciated.

Hello, I would like to make the page and folder in my navigation the active color at the same time. Right now it is only the main folder that has the active color. Sometimes it seems to do it for a very short amount of time, but then disappears.. I use wells template. my site url: https://iguana-avocado-le77.squarespace.com Thanks :) i would like for the subpage inside the folder to have the active color and also for the folder to keep the active color - so on the same time, is this possible? Sometimes it seems to do it for a very short amount of time, but then disappears..

Is there a way with to add a folder (and all its sub-sites) to an index page? I know it's not possible the "ordinary" way.I use the Flatiron index page and have a (not yet linked) folder with sub-sites that I would like to be shown on the index page, which is my homepage. Any ideas?I'm new to coding but got help from some people so grateful for any tips you have :)Thanks!

Lets try this again. The last question I posted seems to have not made it anywhere over the past 3 days. How do i nest folders in the navigation for the bedford template, or in other words make it so that a drop down can have a dropdown in it. This is very important to my client. This is very simple. If Squarespace does not allow this I may very well have to use something else. I found one thread about this and it never got answered... The next thread I found about this, they basically said "One level deep is best.", the complaints were ignored, and the question was closed... I am starting to get the idea that squarespace is not a real good company as far as support and flexibility go. i'm begging you; change my mind!

Hello, I am using the Avenue template and would like the active folder to have a color. Is this possible? I am also using links inside this folder that link to pages outside of the folder. Is there a way to have the link appear as active when the respective linked page is open? I found a solution for the Bryant template, but the css code is different for the Avenue Template so it does not work correctly. Bryant Template Solution Bryant Template Code: #collection-5cddbda26257d80001c55027 { #headerNav nav .external a , #headerNav nav .folder:nth-of-type(2) .folder-toggle { color:blue; } } Attempted to rewrite code for Avenue Template but it does not work: #collection-5cddbda26257d80001c55027 { #topNav nav .external a , #topNav nav .folder-collection:nth-of-type(2) .folder-toggle { color:blue; } } What am I doing wrong? Best, Dave

I am using the Five template and have set up a folder style navigation. Is it possible to get the top level navigation (the folder) to go to the first sub-page when clicked? Currently there is no way to get it to go anywhere. In Squarespace 5 you could set a page to be the default page of the folder when the folder was clicked. When you rollover the folder it behaves like a link so from a usability stand point it should link to something. If I can’t get it to link, can I remove the “looks like a link” behaviors (e.g. rollover color change, mouse pointer change) just on the folders? I am also having trouble with the drop-downs disappearing when I rollover them to click. This is another reason I want to be able to click the folders – when I am testing I can’t get to my subfolders!

I understand that the folder menu link should link to the top submenu item. In my case, it works for one folder, but not the other. "Tribal Art" correctly links to the top category submenu link page which is "All Tribal Art." "Decorative Art" doesn't link to anything. Any clues as how to fix this? My site: https://vibraphone-jaguar-la2j.squarespace.com

Hello everyone, I'm trying to align my drop down navigation to the middle (see the attached image) I tried all kinds of css tricks that I can find about the subject but no luck. I'm hoping you can help me! Thank you in advance.

Hello. I have added some css to change a folder on my primary menu but I have two issues that I need assistance with: I want the drop down folder and it's pointer to be centered with the name of the menu item, and How do I get the colour on hover to go right to the edges (left and right) instead of stopping short. For the life of me I can't work either of these issues out. Website: https://stephanie-g.net/ TIA

Currently when users on my website (heatculinary.com) open folders they have to select a page to go to otherwise the folder does not open. I was wondering if someone knew how to make a "homepage" for the folder. So when users click on my folders there is a page that shows up regardless right away, then they can select the page within the folder they want to go to. Thank you in advance for your help and time!

hi, I am currently working on the Five template and have drop down folder on my navigation bar. My background is light pink, however the outline of the drop down folder is red and I really can't seem to change this! It's driving me mad!I've tried different CSS codes and looked through site styles but can't seem to find how to fix these. I would like to change the red outline to either hsl (0,100%, 97%) or hsl (0, 0%, 27%). If anyone has any advise, please let me know!

I want to change the background color of the folder without affecting the header color. How do I do that?

When my navigation is over a banner in Brine the folder nav links show the same color as my folder background color on hover. I don't want to change the active nav link color, just the hover color for links in a folder.

How do I add a folder to an existing page on my web site

I've created a website using the Hayden template and I would like to add a dropdown navigation to the main menu so that users can quickly navigate to a specific section within an index from the menu. Right now, the theme only supports the top level index page to appear within the main navigation, and I would like to be able to reveal the sections within the index in a dropdown menu upon hover. This would likely involve creating anchor tags for the different sections and then referencing them in the dropdown menu, but I'm not sure what code I need to inject in order to achieve this, and how to do it without breaking the navigation for tablet and mobile. I've seen others attempt to do this by creating folders and then referencing the index sections as a page within a folder, but this doesn't achieve the effect I'm looking for because, if a user clicks on the section within the dropdown navigation, it will only reveal that particular section and the user cannot scroll up or down to view the other sections. Does this make sense? In short, what I'm looking to do is to create dropdown menu navigation for the sections within an index using anchor tags. Any suggestions and coding wisdom are welcome!! Thanks!

As brought up here: http://answers.squarespace.com/questions/8532/folder-navigation-top-folder-doesnt-link-to-anything-can-i-get-it-to-or-remove-link-behavior Folders should have a click through link so that it can be clicked to go to another page. It should work the same as a regular folder in that it should still have an active colour if that has been set so that if you are on a page that is held within that folder or the page the folder link is connected to the "active color" works. Please vote up if you agree. Another possible option is to make a special kind of page that works like a folder in that anything placed under it shows up in navigation as a drop down but it is also a normal page and can have content on it. That would save having to create a special no linked page that works with the pass through. Maybe have a check box or such for people that want it to just act like a normal Folder.