Search the Community

Hello, I'm trying to do a split navigation with my menu after menu items 3. But somehow with the code I used, the space on each side of the logo doesn't look even after I apply to code. I guess it has something to do with the margin-right I used but how to rectifity this so the space on the left and right side on the logo is the same. Here is the store URL: https://lion-mouse-mgrf.squarespace.com/ // SPLIT NAVIGATION // .header-nav { position: absolute; top: 0px; bottom: 0; margin-top: 0!important; margin-left: 0px!important; } .header-nav-item:nth-of-type(3) { margin-right: 250px!important; } .header-title-logo a { z-index: 1000; position: relative; } .header-display-desktop .header-title { flex: 0 0 40% !important; z-index: 999999999; }

Does Squarespace have an option to create subfolders for folders? Our nonprofit organization has "What We Do" in: the navigation bar. Under that we have: Programs, Community Initiatives, Special Events, and Radio Show. I'd like to make a subfolder for programs, but I don't think Squarespace has that option. If that's the case, can someone share best practice documentation for how to achieve this.

Hi! I'm on 7.1 and have already used some custom CSS to center align my logo. But a consequence of this move is that my regular desktop nav wraps to two or more lines VERY quickly. I'd love to collapse the text links on the left (image below) into a mobile-style hamburger and have experimented with some custom CSS I found in the forums. But the solutions I've found so far (see below) collapse ALL the nav whereas I want to keep the social links and header CTA visible. Can anyone advise me how to collapse just the text links into a hamburger mobile nav?

Hi, I am wanted to split the navigation between the 3rd and 4th of my navigation links and moved to an attractive edge of the left and right sides of screens. There is also a shopping bag on the site. Please advise on how to do this effectively. Additionally, I am wanting to have my drop down menus appear as mega menus (full width of viewing platform) without using mega menus, but with the text content of the drop down aligned left with the navigation. Thanks!

Hello! I want to remove the navigation arrows on the image gallery of the Product pages of my site. DESKTOP: remove arrows MOBILE: remove arrows but leave number (1/4) Thannk you!

I have been working on creating a course on my Squarespace website and since I began the digital product setup, I have noticed that all of my MAIN NAVIGATION pages on my site will moved down into the HIDDEN PAGES section. I have been having to add all of the moved pages back onto the main navigation section in order for my pages to be viewed and accessed almost on a daily basis. At first, I thought my assistant had accidentally moved the pages down, and not realized it, but when this has continuously been happening on a daily basis, and I am having to manually put the pages back where they need to be on my website, I figured it was time to reach out and see if anyone else is experiencing this issue and/or if this issue has been made aware of and if a solution to fix this problem will or is available. I am including a screenshot of what happens every time I log on to work on my website.

I was wondering if anyone could help me figure out what went wrong with my website. My navigation buttons on the menu page don’t show up anymore and the navigation menu to switch pages, doesn’t show my three other pages people can click on, including ordering anything. The product descriptions have also disappeared along with adding anything to their cart or checkout. I didn’t add any custom ss/only went off of the templates. They were there when I started but they’ve disappeared. Any help you could give me would be so, so appreciated! pumpkinsbakery.com

Hi there, I can't seem to find what i'm doing wrong (in the css code) or what I should add. I have a sidebar navigation (left, which I want) but it shows up at the right side, both in mobile and desktop. My website is: https://elketeurlinckx.squarespace.com/ Can anyone help me?

Hello, I have customized my navigation to include color and font changes on hover. I have set the active links to be bold. The issue that I am having, is that I have a folder with links inside. Once I select one of those links, all of the links are bold instead of just the active link. I have included 3 images for easy viewing. An image activating the dropdown by hovering over the Work link from the home page. The folder links show correctly. An image hovering over the links within the folder dropdown. The text style and the background act as expected. An image of the selected link from the previous image. As you can see, all of the text is bold. I am wanting only the active link to be bold. I do have my site live so you can see what is happening. https://www.sonyacollins.me/ Here is the code that I am using. I feel like the code is way overkill, but it just wasn't working at all without going in depth. If you have any ideas to clean it up, I'm def game. //---START Nav Style Color .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0!important;text-align: center!important;right: -3.1em!important; } //---End Nav Style Color //---START Remove line from Nav .header-nav-folder-item--active .header-nav-folder-item-content {background-image: none!important; } //---End Remove line from Nav //---START Remove line within menu folder .header-nav-item--active a {background-image: none!important;font-weight: bold!important;color:#fff!important; } //---End Remove line within menu //---START Adjust Padding on medu folder .header-nav-folder-item {min-width: 20px!important;padding:10px 10px!important;} //---End Adjust Padding on medu folder ///---START Folder NAV hover .header-nav-folder-item:hover {background: #8da8bb!important;font-weight: bold!important; } //---End Folder NAV hover

Hi there! I am currently troubleshooting a way to create curved corners on my header navigation. I'd like it to be a dynamic navigation where it's visible when you scroll up but clear when you are on the page. Also to remove it on mobile. Here is an example of what I am looking to create: https://www.rhodeskin.com/ Any help with this will mean a lot! I've been trying to find a solution for this for ages! Thank you!

Currently, my header nav looks like this on tablets, where the links move to a second line: Is it possible to instead shrink the nav wrapper to still fit on one line on smaller monitors and tablets? Here's what it looks like on larger screens:

Hi there, I'd like to make this website show one of the two drop down menus at all time (not just on hover) - so if a page on the Svenska side is active, the Svenska menu remains visible, and if a page on the English side is selected the English menu is showing. Is this possible? https://www.isaholmgren.com/biografi Screenshot attached of how I would like it to appear. Thanks for your help!

I was wondering if it could be possible to have a menu (hamburger) button for my site navigation on desktop in 7.1? I've added css in previous versions with no problem. I would like to have the menu icon in right corner. When clicked, the menu section fill 1/3 right side of the page, with accompanying icons (see attached). Thanks in advance!

https://cosmo-fluid.squarespace.com/?password=pearler I've positioned my cart and social links to be fixed to the right side of the page. However, I'm noticing the position of the cart doesn't stay the same like the social links do. Here is my code: @media screen and (min-width: 749px) { .header-layout-branding-center-nav-center .header-actions--left { right: 4vw !important; left: unset !important; margin-right: 3vw !important; flex: 0 1 25% !important; } .header .header-actions-action--cart .icon { height: 20px !important; width: 20px !important; } .header-actions-action--social { position: fixed; top: 50%; flex-direction: column; right: 1vw; } .header-actions-action--social .icon { margin-left: -40px !important; //change as necessary margin-bottom: 20px; } .header-actions-action--cart { position: fixed; right: 30px; top: 45%; } .header-actions--right { justify-content: center; } } Any ideas? Thanks!

Hi, I have inputted an SVG logo in my header, however only on certain pages the "visibility: hidden !important;" code isn't hiding the original PNG logo. It seems there's some CSS "content: url(…)" that is overwriting the visibility hidden. Resulting in 2 overlapping logos. This content code is tagged as !important and it's proving difficult to target. How do I hide the image here so only the svg shows? Site: https://mrwatt.co.uk/work (it works here) Site issue: https://mrwatt.co.uk/puregym-pride-2019 (overlapping logo) password: 2121 Thanks

Hi All, I am very new to building a website - and I want to make my image blocks connect in a continuous light box - I have designed my own grid layout as the standard ones were not showing how I wanted them to. Now I need to connect all images in a Lightbox rather than individually. How can I do that? Thank you for any help!

I've added a background image that appears when you hover over my client's header navigation. It is a pen stroke so I'd like to add an animation that loads the image from left to right (not all at once) to give the illusion that someone is literally underlining the word with a pen. It should be the same size on all words (it should not get bigger with longer words). It's currently floating in from the left and leaving at the right. 🤣 Help! URL: https://field-studio.squarespace.com Password: causewayside

This site uses a custom hamburger menu, but on the home page it disappears into the background upon scroll because it's white and most of the backgrounds down the page are also white. Is there a way to have the word "Menu" change color to black up on scroll to that it appears continuously and doesn't get lost? https://kennerknecht-design.squarespace.com/ PW: KDG123 Thank you!

I added custom CSS code to create an underline while hovering on linked text, including navigation. What I would like to do is remove the underline while hovering on a "Folder" in Navigation as it doesn't actually link to anything. How would I do this? The example I'm referring to in the image is "Visit Us" should not be underlined while hovering, but Denali Brewpub and Tasting Room should be. Here is the CSS code I have: h1 a:hover, h2 a:hover, h3 a:hover, p a:hover,.header-nav-item a:hover, { text-decoration:underline; }

Dear all, I am struggling finding the solution, hopefully is simpler than I think 🙂 I have the following website. https://www.paolodebenedictis.it/projects What I am trying to achieve is the navigation throught the galleries without going back to the page "Projects". Each gallery has many images, which can be navigate with an arrow (the nr. 1 in the attached screenshot). Is there any way to insert a navigation button at the bottom that would allow you to go to the next or previous gallery (numbers 2A and 2B in the attached screenshot)? Thank you Regards Maria

Is there a way to hide the site title on only the homepage of my site? Basically, I want my logo to be large in the first section of my site and it looks repetitive with the smaller navigation bar site title logo above it.

Hello, can someone please help me. I am unable to change my cart colour to white on specific pages (Home and Contact Page) to match the logo and navigation tabs. I have tried multiple codes however they don't seem to work for me. Thanks!

Hi there! I'm on 7.0 and am trying to create my sites navigation bar to be full width with my image gride, i've changed the site width to 100% with some padding but it's not matching, i've tried different custom codes form previous forum posts but they don't seem to work. I've attached a screen shot of my website vs what i'm trying to create from the Matsuya template.

Hi! I am trying to find out how I could change the hamburger menu to a close icon when clicked? when close get back to the burger icon, this on mobile. I am using Brine template 7.0 website code : 123456 TIA

Hello, Noticed that the pages surrounding the dropdown menu in mobile aren't clickable anymore, can this be fixed with CSS?? Thanks Here's my website https://www.erinncapko.com/