Squarespace index drop down menu For example if I hover over Alumni, the options in the drop-down are occluded by the label of the website (in white font). Jul 30, 2023 · In this article, we will guide you through the process of adding a navigation drop-down menu to your Squarespace website. Can this be done in squarespace? Jan 4, 2024 · One thing is not working quite right. Dec 25, 2021 · What I'm trying to do is get around the fact that you cannot put INDEX pages into FOLDERS, so that they appear in drop-down menus in the navigation menu in Squarespace 7. I was wondering if there was anything i could do to change this (without changing the template) We like the current template and how when you click on the index page on the navigation bar that everything comes up stacked. /* Change dropdown menu background & link color :) */. I just posted saying there should be an open that says the click opens to a predefined link. header-menu-nav-wrapper, div. So I thought of creating a FOLDER with empty pages, that will only be used for the menu and that if clicked on would immediately redirect straight from the PRIMARY Apr 2, 2024 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. Is there a way I can blur the background of the folder menu, just like you can do with the header? Mar 3, 2021 · The Customs CSS currently looks like this and now the button for the drop down menu won't work- @media screen and (min-width: 0px) { [data-folder="root"] . So I'm guessing that putting: !important tells Squarespace to notice it. I also would like it to be semi-translucent white like RAMSA. Drop-down menus are an essential feature of any website’s navigation. ^ This is the custom date picker I pulled from Jun 9, 2021 · Use a drop-down menu and different Gallery pages. 1, recreating your site’s des Jan 28, 2025 · I would like the items in the drop down menu to show the active color for the page it displays. Mar 21, 2025 · I'm building a site and would need some extra help with the drop down menu. Jul 29, 2019 · Thank you so much!! I needed to edit the drop down folder links color to black and I used your code as guidance. Jan 21, 2019 · Learn how to create your own drop-down navigation menu in Squarespace with this easy to follow tutorial. dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute). I would love to have the drop down menu folder to be below PALVELUT but at the center of the word. 0 3:03 How Drop Down Menus depending on version and template 4:26 Customize the Drop Down Menu design in 7. Despite the z-index, which helps the dropdown part overlap on the landing page, the Squarespace blog pages make Mar 12, 2022 · Change shop navigation to a drop down menu, where you hover over a primary category (ex. The ideal functionality would be that the top level menu item and the active item from the drop down show the same color. thank you so much! Aug 3, 2021 · Hi Tuan, Removing the above code did work, however when one page is selected in the dropdown menu, the other isn't visible. fr This is the Marta template, Squarespace 7. Header-nav-folder { background: transparent !important; } Does anyone know how to do this? Many thanks in advance. Is there some way other than messing with the z-index with which I can force my dropdown to register the hover event and work as expected? I am comfortable using Dec 3, 2024 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. com PW: Ciao1710 Thanks in advance Jan*. Is there anyway to get an Index page to display as a Folder (drop down menu) in the navigation? I need both features rather than having to pick one over the other. Ideally I want to keep the index pages as they are (rather than convert them to a regular page) as they're sales pages and are easier to update as an Index. I used the following code and the Google Translator works just fine. com I'm having issues with he mobile version drop down menu having loads of blank space between the top and social buttons as shown in the attached photo. Communication should be honest. I tinkered around with your site and found this: . Squarespace drop-down menus are created using folders, which can be added to the main navigation bar. olive-groves. I am by no means an expert but someone who has come here for help myself before. Jan 12, 2024 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. lessisbetter. 0 Would anyone be able to assist with Custom CSS? Thanks! Sep 11, 2018 · It may also create a drop-down menu in your site's navigation. Feb 8, 2024 · This expert Squarespace guide has the steps and code you need to change the colour of your dropdown folders. If you change the order of the menu items then you need to update the CSS. Jun 17, 2022 · Hello. How can I tell Squarespace to expand the height of the page in question to accommodate the expanded accordian text? Any tips would b Feb 17, 2020 · Hi, I'm in Version 7. But depending on the page you are on, the text is not always best visible. Does anyone know the codes for the three adjustments above? 🙂 Jan 24, 2025 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. Dec 13, 2022 · I created it as an Archive block to show blog categories on a separate blog landing page (actually an index page), but it isn't playing well with the blog posts once you click on the categories / go to the Squarespace default page. Squarespace Menus. The services landing page is set up as an index page with a few pages within. Scroll down the page selection menu to ‘dropdown’. They allow visitors to easily access different pages and sections of a website without cluttering the main navigation bar. You can easily add a drop-down menu to your main Squarespace header menu: Head over to your Pages panel and click on the + icon to add a new page. Jan 27, 2022 · I've always disliked the way that squarespace shows it's menu options in the mobile view, but I've never been able to get the code right to fix it. The name of the item is "Tjänster" (Swedish for "Services"), and the drop-down contains four pages with various services that my company offers. How can i do that. So they want that when you click on some parts of the drop down menu it opens another menu. To add folders on your site, create a folders. To clarify, I was trying to: increase the size of the “Set 1” button (my code wasn’t working in the mobile version), and Jun 7, 2021 · I'm currently working with a client and they ask me if their website could have a multi nav drop down menu. Decrease the height between the drop down items 3. Get start May 9, 2023 · Hi, Currently using a template that stacks index pages rather than creating a drop-down menu in the navigation bar. 0 1:41 Adding Drop Downs with Index Pages in Squarespace 7. If code doesn't work, you can send site url, I will check again. Instead of showing the nested view after clicking a folder, I would like for the available pages to smoothly display underneath that folder as a drop down menu with the appropriate arrow directions too. 1. Oct 16, 2024 · To make Dropdown appear in Burger Menu, you can follow these. 0 sites do not have index pages so you don’t need to worry). How can i do it? Feb 28, 2025 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. header-nav . MENTIONED IN THE VIDEO: Jan 30, 2023 · As you build your website with Squarespace, use folders to create drop-down navigation menus (also known as nested pages or sub-menus) on your site. Jan 12, 2024 · If your site is on version 7. com Hi. Right now it shows the active color for all the items in the drop down. I am stuck on the simplest thing!! I just want to have something like: Page A - subpage 1 - subpage 2 -subpage 3 And when users see my navigation at the top, they see Page A automatically in the Jul 17, 2024 · Hi, I am trying to make a dropdown featured on a button. For the moment, it's a lot of work. Wir können die Website jedoch stornieren oder entfernen. i made the options, however when i hover over the button, nothing drops down. Ein Hinweis zu Acuity Scheduling-Konten: Ohne Squarespace-Login ist es nicht möglich, Acuity-Konten Abrechnungsberechtigungen zu erteilen. The plugin contains loads of different options to customize the drop down menu in Jan 19, 2016 · The menu we’ll be creating features two sub categories that appear once the parent link is activated by a hover. The logic is simple: each folder corresponds to one drop-down menu in your navigation. Either I want to remove the drop down completely or add shortcuts to scroll to sections o Mar 30, 2020 · Hi, i'm almost ready to launch my page but I have i would like the index slide to loop back to the first slide instead of a hard/fast scroll how can i change the font size to the dropdown menus? note** I'm using a custom font caper-hypersphere-2ef9. Thank you for your help, Jan 4, 2024 · ⭐ Squarespace Circle Leader ⭐ Squarespace Expert ⭐ Platinum Partner ⭐ Software Engineer ⭐ UX Designer ⭐ Design should be simple. header-nav-folder-content {left: inherit!important; text-align: left!important;} Feb 25, 2024 · Hello, I'm having an issue with two different Accordion drop down menus, the first on the FILM navigation page where "social media" and "short film" drop downs won't work on mobile. header-nav-folder-content { display: none; } &~div { display: none !im Jan 19, 2025 · I’m trying to underline a specific drop-down menu item when clicked and the user is redirected to a page. org. com and the password is "create". DIGITAL for plugin solutions with a proven track record. com I'm trying to make my dropdown menu look like https://www. I want the menu item to stay underlined to indicate the user is currently on that page. However, creating a full-width drop-down menu in Squarespace can be a bit challenging, especially if you’re not familiar with CSS. I'm so confused. Feb 10, 2025 · Create lists of links that appear when visitors hover over navigation text. With a drop-down menu, visitors can easily navigate through your site and find the information they need. Sep 17, 2020 · This CSS is very specific to your current menu layout. First, use this code to Custom CSS box [data-folder="root"] { . header-nav-item--folder . 1 and 7. Jan 10, 2025 · ⭐ Squarespace Circle Leader ⭐ Squarespace Expert ⭐ Platinum Partner ⭐ Software Engineer ⭐ UX Designer ⭐ Design should be simple. 1 site, but no such luck. 0. If you add another Folder Page and it has as many or more items then it too would pick up this CSS. Nov 25, 2020 · When the cursor hovers over the "projects" on the navigation bar, I want a drop down menu to come down listing all the things I've worked on. Also, I might want to change the font highlight colour when a submenu item is clicked Apr 15, 2021 · Thanks so much. Folder Configuration. This is how it looks like right now: Nothing wrong with it, it's just plain. So in the attached image, more vertical space between "Doodle Line Art" and "Lino Print Stars" etc. Jan 24, 2024 · hi all- I am a front-end developer who is using squarspace to make a website, and really enjoying it. squarespace. For instance, when I select "Education Settings" and am on that page, the text is shown as blue, which is what I want, but the other page isn't shown (or is shown in the navy blue colour so not visible). I would like it to match the custom date picker I sourced from the Internet : ^ This is the drop down menu I want to customize. Luckily, there is a workaround. I hope that makes sense. In the Brine template family: In the Squarespace menu, head over to Design and then click on Site Styles. Click the + (plus) icon in your folder to Add a link. Our site is using the Version 7. Kinda redundant. I now do have a transparent drop down folder menu. Scroll down until you see the section “Header: Layout". The odd thing is if I move the Jan 7, 2025 · My drop down menus are displaying an odd white box around them (photo attached). Tags: Navigation Customize: Adjust the px values to control the gap. Could somebody help me? Thanks! Sep 27, 2022 · Would appreciate some help on this. twinforkswindow. I've tried using this code: . 0, dropdowns and index pages look similar in the Pages panel, though their functionality and appearance on Gathering resources Followers: Jul 9, 2020 · I wanted to know if it was possible to create a dropdown menu when hovering over "SHOP" in my header ? I want the different categories to appear (the same one used as filters on the shop page: t-shirt, longsleeve, etc. I’ll also show you how to add Index pages to your drop-down menu - a popular question of many Squarespace users. I've styled a drop down menu using some code from the Shwartz-Edmsiten site and adding some bits to it (some width and nowrap properties to accommodate the longer titles and added the transform property to bring the menu down the page). On the desktop version of my site I put a little ||| icon that leads to a drop down menu. The second on "1-1 Coaching", where "The Musical Octopus" dropdown menus won't work. When moving the cursor from the navigation points like 'Online Courses' down to the dropdown menu, it always disappears, and you can't select the items in the dropdown menu. 3s; } div#block Sep 23, 2012 · The folder automatically clicks to the first normal page (NOT BLOG) it finds in the folder. Jan 16, 2021 · There isn't a migration option yet from Squarespace 7. Add the Apr 22, 2024 · How to create a dropdown menu on your website. Can someone tell me where I need to make. ). Sep 24, 2022 · 0:11 How to Add a Drop Down Menu in Squarespace 7. conf file in your collections folder. header-menu {max-width: 50%;} Jan 27, 2025 · Fully customize the drop down menu. You can see an example of what I want to do on "Projects Menu" in the nav bar. Thanks! Learn how to increase the z-index of a dropdown menu to make it visible above a section on a Squarespace website. The site is: https://rust-walrus-w2kj. Nov 8, 2022 · My Website is https://rotordroneservices. Now it's aligning to the May 22, 2021 · I needed help changing the background colour for the dropdown menu on my homepage. Nov 24, 2020 · Site URL: https://www. Want to take your Squarespace drop down menu to the next level? With Spark Plugin’s Squarespace Drop Down Menu plugin, you can! Install it on your website, and you’ll have a new and improved menu that really stands out. header-layout-nav-right . Index Pages are useful as project portfolio pages for architecture firms, homebuilders, landscape design or interior design websites. Want to improve your Squarespace store? Check out SF. Here's my setup: The drop-down menu item "Treatments" redirects to an unlinked page with the URL slug /treatments. nickwaldinger. Jun 27, 2023 · I am currently working on a website and I'm looking for help trying to workout a custom look for a drop-down menu. ramsa. Dec 9, 2019 · I try to customize my drop down menu and I want to decrease the space between the primary nav and the drop down menu. CSS snippet: May 4, 2020 · 3. Mar 5, 2025 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. com Password: Bagel Edited January 7 by joelbechtolt Jan 22, 2024 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. Ps. co. But it causes Apr 3, 2022 · Site URL: https://www. 1, is there a way of editing the style of the drop-down menus in navigation? Maybe just change the background colour? my site is carbonbuddyproject. Oct 18, 2024 · Squarespace Statistics: The Ultimate List of Stats About Squarespace; Understanding Drop-Down Menus in Squarespace. Might be a difficult one, wondering if anyone ever looked at it before ? Jan 21, 2019 · In this tutorial, I’ll show you how to create a drop-down menu in Squarespace. We have styled the dropdown button with a background-color, padding, etc. the button i am hovering over is "about" Nov 2, 2020 · I added something to the CSS to allow my header to be fixed and the colors to blend. com password: whitebox2020 Apr 22, 2022 · I'd like to right align the text and box of my drop down menu. uk Hello all, I'm trying to create a transparent dropdown menu on a 7. . com. You can only move to 7. If you hover over "About" you see a horizontal drop down menu instead of vertical. Mar 21, 2024 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. The folder Dec 29, 2023 · The easiest way to create drop-down navigation menus on your Squarespace website is to use folders. Wir können das Konto Nov 13, 2014 · Hello,I have gotten the sub links in the drop down menu to work however the main title of the navigation menu doesn't go through to the top of the index page they click through to the first page or link under the drop down menu. Apr 21, 2021 · These are typically index pages (although some Squarespace 7. Or is there a way to allow the customer to select more than 1 choice from the s Mar 1, 2022 · Easily adjust the gap of the navigation items in the drop-down menu. org Thanks, Emma. You can also use Index Pages to organize content in one place. 35px; z-index: 1 May 17, 2020 · Hello, I was wondering if there was a way to add a down arrow icon to the drop down menu? I've tried multiple css codes but nothing has worked. Nov 10, 2020 · Site URL: https://dev-bcco. Squarespace drop-down menus are an essential part of any website navigation. green; left: 0; z-index: 990; transition: all 0. Step 1: Create Navigation Links The first step in adding a navigation drop-down menu to your Squarespace website is to create navigation links. For the first couple of months after launching the site, I have only used the built-in analytics in Squarespace. The . Jan 12, 2018 · Notably, the drop-down is definitely hidden behind stuff. 1) to push the rest of the menu down, to allow space for the drop-down menu? In advance, much much appreciated! Edited January 4, 2024 by aevesam Feb 11, 2020 · I'm working on making a Squarespace page with custom CSS to be mobile responsive. Below I have attached an image. I'd like to add a couple of Index Pages to a folder that would be visible in a dropdown menu. 1 5:40 Customize the Drop Down Menu design in 7. header-menu-nav-item a {padding: 10px 2vw; margin: 0;} . The problem with putting the page in there is that it makes two links to the same page - the actually Main Nav Link and the page in the drop down. Jan 5, 2023 · Hello 🙂 I am trying to make a drop down folder nav for my site --- sadly the drop down is getting cropped 😞 I've tried to overflow-visible & z-index 9001 in CSS but to no avail - any help greatly apprieciated! Thanksss Hen Feb 11, 2025 · Please be aware that in instances where Squarespace is merely the Registrar and does not provide web hosting services, Squarespace does not control the content and the content does not reside on Squarespace’s servers; you will need to resolve the claimed trademark infringement directly with the site owner or the web hosting service provider. May 29, 2020 · Because I'm using a vertical navbar however, the submenu text is overlaying the remaining menu text when it drops down upon hover over or clicking on. So the white background from the drop down goes into the white of the primary nav. Decrease the height between the (1) main navigation and drop down menu items and 2. I advocate for both—on behalf of users everywhere. Make the fonts of the drop down menu items smaller Then after that I can adjust the padding between the navigation and content. I've attached images!! thank you! Mar 25, 2020 · 1. In a mobile screen, my page has a drop down menu with the different links for the page. 1 by starting a new trial on 7. You can have several separate folders for different drop-downs, but you cannot nest folders within folders. "fabric") and then the sub-categories appear underneath. Use the dropdown feature to create drop-down navigation menus May 9, 2024 · The main dropdown menu button should link to the main index page and the drop-down menu items should link to the relevant sections in the index page. 0 template you're using? Make sure to find out here before you dive into the instructions. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. They allow visitors to access sub-pages directly from the main navigation menu. This is how I would like for it to look like: The drop down menu for this company displays images for the options. Select the plus sign next to main navigation to create a new page. Mar 9, 2023 · Is there a way to add a drop down menu for customers to choose flavor varieties? I have gift boxes where customers need to choose 3-6 flavors but when I add them in they register as variants-not what I am looking for. Here’s how to create one in Squarespace (and if you’d prefer to watch rather than read, head on over here): Head to your main menu and click on ‘pages’ under ‘website’. Right now it's left aligned, which is causing my text to get cut off (see screenshot attached). Feb 28, 2025 · On my site, I have added a drop-down menu item in the top menu. Thank you! Dec 10, 2019 · I try to customize my drop down menu and I want to decrease the space between the primary nav and the drop down menu. Would you be able to help me with code (for SQSP 7. Ein Hinweis zu Squarespace 5-Websites: Squarespace 5, unsere alte Plattform, lässt keine Bearbeitung von Berechtigungen zu. Sep 22, 2021 · Thanks tuanphan for the reply. Mar 16, 2025 · Hi all, I want to know how to customize the padding and corner radii on the default Squarespace email form dropdown menu. #1. Any help would be appreciated! Dec 13, 2020 · I would also like to tweak the style of my dropdown menu : I would like the dropdown menu items to be Capitalized (not Uppercase like the main navigation menu) and a slightly smaller font size. an adjustment, I'm stumped! hardballhebrews. Folders group pages and collections together for use in submenus, drop-down menus, and/or index pages. This is another great method to organize your projects even further, and it’s really easy. Squarespace offers an easy way to add drop-down menus to your site’s navigation. Aug 23, 2022 · How to make your header navigation transparent in Squarespace 7. I'm using the Sofia Rey template (Brine) 7. header . Here is the website URL: www. There's a picture with what my client wants me to. @fredericG how did you achieve this effect in your site?Thank you,Gavin Oct 18, 2024 · Understanding Squarespace Drop-Down Menus. I think in doing so I've created an issue with a main nav folder and its dropdown menu. May 27, 2020 · Hello! I'm having the same problem on my site https://alanonsandiego. They do it when I am in the design panel, but once I refresh, the change goes away. com PW: Ciao1710 Thanks in advance Jan* Aug 29, 2019 · Hi there. 😕 . My website is www. Many Squarespace sites, including this one, use an index page as the website's homepage. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. header-nav-folder-content { background: #ffffff !important; color: #000000 !important; a Oct 18, 2024 · Adding a full-width drop-down menu in Squarespace can be a great way to organize your website’s content. Not sure which 7. Apr 22, 2024 · How to create a dropdown menu on your website. For some reason the codes not making any difference on the page. 0 to Squarespace 7. Aug 7, 2020 · Site URL: https://basseducation. It only works when moving the cursor over the small downward arrow. To include Index pages within your drop-down menu folder: Drag the main Index Page to Not Linked section within the pages panel. Dec 11, 2019 · Using 7. As every dropdown menu item has a unique slug, it can't be set to link to the main index page. Feb 17, 2020 · @tuanphan I wasn’t sure how to respond to your questions directly (I didn’t see a “reply” option). Apr 13, 2020 · Site URL: https://wolf-cube-3k56. More options: Get complete control over your drop-down menu with this plugin. Navigation links are the menu items that appear in the main navigation bar. Want to learn more about my Squarespace services Jan 17, 2024 · Hi @Ginger_Meadow_08. Make Fancy CSS3 Rollover Navigation Menu in a Few Clicks! No JavaScript, No Images, No Flash : CSS Only! Custom Shaped Nav Drop Down Menu Jun 22, 2022 · Yes sure, it is : testsite I am trying to make 4 categories in my shop navigation that would each drop down to subcategories upon hover. The below code you gave me a few days ago did cause a bit of a change on the dropdowns, it added and underline under the nav menu options. I'm already using some code there, but cannot figure out how to get the drop down menu folder to sit better under the navigation word "palvelut". com Can anyone recommend CSS to add so I can spread out the items in my drop-down nav? I've already added CSS for line height, but I don't know the tag for the space between the line items. Instead of adding a page, add a “folder”. I would like the dropdown menu to be less cumbersome to select. 1 and I want to increase the vertical spacing/padding between items in the drop down menu. 0– Bedford family (Bedford template). In that case another way to target the menu you want to style would be needed. NEW - Check out our NEW program SheCodes Bootcamp - and become a developer in just 4 months! Sep 2, 2020 · I have already changed the drop down menu, but I'd like to add another change to get the words in the dropdown menu to turn white when you hover on them. Example Explained. Folders & Indexes. Is there a way to stop the double up of 'Services' in the menu drop down? I need the 'Services' link in the menu to go to a Services landing page, currently the first page in the menu. com The drop down menus are working beautifully but if the user leaves the boxes expanded, the text overflows into the next section. Unfortunately when I look at this on Mobile, I want the first thing the user sees to be the drop down menu pages, not the ||| symbol. zlhttb eykxscc stuohttw iwmnwqb jjuscq xumd lyg ogvnj mvh mipaw gbagjbk smtk uunxjb fdjnwvu axnxaf