Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'navigation-link'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. I am wanting to adjust the layout of the navigation links in my header. The templates provided in site styles do not satisfy the layout that I want and I have yet to find any code that does what I want. All I want to do is move "Contact" to the right side of the header and leave "Work" on the left side. I am able to add a button but the buttons do not achieve the clean look I am wanting. Does anyone have any suggestions on how to achieve this fix?
  2. Site URL: https://www.revenyou.com.au/ Hi SP Family, We recently built our website - www.revenyou.com.au. Used version 7.1. I built the site using folders and then within the folders I added pages. I made the folders so that they would like to pages that were not linked as we don't have the indexing option anymore. Now, the issue is when you go onto mobile, those folders do not display so in essence those header menu items are not displaying on mobile. I know this is due to the fact that they are in "not linked" and I can move them back but how do I get my folders then to have information for the readers? For example About Us is the Folder - has the "why use us" and "the team" And then another page as "industry awards etc" QUESTION: How do I make my folders visible on mobile?
  3. hi everyone, I'm looking for a way to create a floating button (linked to an url) on the right side of a page, the button remaining from to bottom while scrolling... thanks adance for your help
  4. Site URL: https://tbdwebsite.squarespace.com/ hey guys! trying to reduce the space between dropdown links in my menu. see photo attached! is there any CSS to move the items closer together?
  5. Site URL: https://cyan-grape-y4g4.squarespace.com/ Hello! I’ve been having an issue with the top navigation links on my website, which I’ll demonstrate using the above sample site. I would like the top navigation words to function as clickable links while still acting as folders that produce a dropdown menu. So, in this example, when the user clicks the “About” link in the top navigation, they will be brought to a main “About” page, but hovering over “About” will still produce the drop down menu. I’ve found this can be partially executed using this code: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-nav-folder-title[href="/about-1"]').click(function() { window.location = "about-page-main-test"; }); }); </script> Using the above, “About” still functions as a folder, but is also clickable and leads users to my desired page. However, I have found when I implement this code, right clicking “About” in the top navigation and attempting to open its link in a new tab leads me to the wrong page. More specifically, it leads me to the first page in the “About” folder—in this example, this is the “What We Do” page. Why does this occur? Is there any way to fix it? It could be addressed by having the desired page as the first one in the folder, but I’m hoping for a separate solution that doesn’t require me to add any other pages to the folder in question. Can provide the password for the site in a message upon request! Thank you! K
  6. (Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item>a:hover { color: red !important; } .header-nav-folder-item:hover a { color: red !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.
  7. Site URL: https://pte.squarespace.com/ Password: Party Hi! I am wondering if there is a way to remove the folder content for mobile and just leave the main titles in place. For example: ABOUT (remove Arrow and take me straight to the About page) I believe there are two ways to go about this: 1. Add custom code to switch the navigation links from taking you to the folder contents and straight to the page. As well as getting rid of the arrow. or 2. In the custom CSS, I initially removed the redundant menu options. For example: ABOUT > ABOUT, Team, Process, Pricing I turned off the display of .header-nav-folder-item: first-child. However, instead of hiding it, we can switch the .header-nav-folder-item: first-child with the first ABOUT option that takes you to the folder contents. The overall goal would be to bypass the nav folders and go straight to the pages for mobile devices only. Your help is greatly appreciated! -Patrick Password: Party
  8. Site URL: https://luminaryunion.squarespace.com/ My client would like the login button to be a part of the nav items on the left side of the logo. I couldn't figure out how to change it with flexbox or otherwise. Is this possible? I shrunk it for now but if it can be moved she wants it formatted the same as the nav left items.
  9. Site URL: https://www.actionlegalprocess.com I've seen this question previously but mine is a bit different. I want add multiple pages to my site, but I dont want the navigation tab on the copied customized pages. I tried some code that removed the navigation, but it also removed my logo that was in the same place as navigation. Can I just remove the navigation of the multiple pages? TIA
  10. Hello, I have spent a good amount of time digging through multiple threads/forums regarding anchor links in 7.1 sites and wanted to summarize what I have working, and what issues I am seeing. (I apologize as I am unable to share my site yet as it is not public, and also for the giant info dump, but I thought it may help others to see it all consolidated, as I am combing multiple problems) My setup: Currently I am using code inject blocks to create div tags for header site navigation anchor links. Example: <div id="about" class="anchor-offset-about"></div> Header nav links are written as follows: /home#about The class is so I can create a manual offset for both desktop and mobile jumps to display in the exact spot I want. Example: //desktop// .anchor-offset-about { position: relative; top:0px; } //mobile// @media(max-width:767px) { .anchor-offset-about { position: relative; top:100px; } } Smoothing scrolling is enabled via: html { --scroll-behavior: smooth; scroll-behavior: smooth; } Smooth scrolling on Safari specifically is enabled via: (site-wide header injection) <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script> <script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script> -- This setup IS WORKING correctly. HOWEVER, I am running into some weird glitches across different viewing formats. 1. Chrome - Everything is working properly. Aside from the random anchor link not landing exactly correctly (very rare) this all works. 2. Safari -Upon landing on the home page for the first time, every anchor link appears to force a page refresh and jump to the anchor point without smooth scrolling. After this completes, anchor links will work properly and smooth scroll between them. I am still looking for a solution to this. There are the two options I have tried without success. 1. Force the home page to load at #top. This is not a viable solution, however, as it will work on the very first page load/visit. But if I visit another page on my site that is not the home page, and try to return to one of my anchor links from the header navigation it will force a page load to the top again and not jump to the correct location. 2. Purchased squareaddons.com Anchor Links product. This will solve the problem on desktop, however, I am unable to set class specific adjustments, so anchor link jumps do not land correctly on mobile. I have submitted a ticket to them to ask about this. 3. Mobile (Safari and Chrome on iOS - both iPhone and iPad) -Similar to above, page refresh occurs on first click of any header nav link after landing on home page. Scrolling will work after this. The main other problem on mobile only is that my site header, which is both fixed and using the "dynamic" setting in Squarespace 7.1 is not loading properly when using any anchor link for the first time. It jumps to the right location, but is transparent, showing content underneath where it should be a solid color (white in my case). If I start scrolling or click the anchor link again it will display properly, but makes for a very messy first-time viewing experience. And advice or solutions to these issues would be greatly appreciated. Thank you!
  11. Site URL: https://lobster-piccolo-c8t5.squarespace.com/business-prsentationen Hello Squarespace community, I'm having trouble changing the font color of the dropdown menu of a folder in the navigation bar. I would like to achieve 3 things: 1. Have this pink color as box color of the dropdown menu (achieved that) 2. Have the title of the folder (Für Unternehmen) in the same pink color underlined when selected 3. Have the links in the list of the dropdown menu have white font color (even when not visited or hovered) I am struggling with points 2 and 3. Could someone help me please? (the password for the site is: helloworld) Thanks in advance 🙂
  12. Site URL: https://www.allgardening.co.uk/ Remove padding around top nav and image below in SS 7.0. I want to be able to move the hero image up, currently there is a huge white space, can't find a way to remove via site styles. Its Alex template, on Version 7. Would someone have the required code to add to the CSS? Thanks I'd also like to be able to move the nav elements so they are all on one line, responsively. Would someone have the code for that too? Thanks Loads. Phil
  13. I'm trying to create a bilingual site and would like to have the language links as buttons on the header navigation, but it seems Squarespace 7.1 interface only allows for one custom button, social links and cart in the header navigation. I created a PT button for the Portuguese site and would like to create another button, EN for the English site. It there any way to add another button via code to the site header?
  14. Site URL: https://www.curatedbygw.com/ Hi! I needed to change around the navigation design and used the custom code below. The problem is, now only the top and bottom portion of my logo links back to Home. The center part of the image isn't linked. Any help would be greatly appreciated! /*Secondary Navigation */ .header-display-desktop .header-title { height: 4vw !important; display: flex; align-items: center !important; justify-content: center; } .header-display-desktop .header-nav { position: absolute; top: 0; margin-top: 0 !important; height: 4vw !important; display: flex; align-items: center !important; justify-content: center; } .header-display-desktop .header-nav-item:nth-of-type(2) { margin-right: 50vw !important; }
  15. Its a single page website. Here I wish to change the color of the active section on the navigation. I have added the following code but this only seems to work on force state over the link. .header-nav-item a:active { color: #fc9e4f !important; } Tired this one as well body:not(.header--menu-open) .header-nav-wrapper a:active { color: #fc9e4f !important; } Let me know if anyone knows other ways to make this happen. Thanks team
  16. Site URL: https://scottdimond.squarespace.com/ Password: letmein On my main page I have a slideshow:full. I want to set it up so if the user clicks on one of the photos going by in the slideshow, they are taken to the specific gallery that contains that photo. I can edit a photo on the main page, click on the gear icon beside link and then select page. Clicking on search, I can see all the pages I have including one called galleries. But I cannot refine the page to a specific gallery within galleries. For example, these navigation exists "/galleries/panoramics" or "/galleries/prairie-abandonment-2" but I can find no way to associated one of those with a photo on the main page. I seem to be only able to link the photo to the entire gallery, which will then display various collections within. I want to direct the user to the specific collection with galleries. How can I do this? My only selection is Galleries. How to I select one of these: Thanks
  17. Site URL: https://aircare-systems.com/ I hope someone can help. I am adding multiple languages to my Five template but want to change something on the main navigation where the language options are. At the moment I have a folder marked PL on the navigation. This folder has the drop downs to the translated pages. I either want to replace the text with an icon png I have drawn which highlights the PL, or change the background of the PL text to be a red square. Can anyone advise please? I have spent most of the day searching the web but the code I have injected just doesn't work!
  18. Site URL: https://www.newnative.design/welcome-3-1-1 Hello, is it possible to add custom CSS to remove navigation links from the header bar (desktop & mobile) on a single page, in this case the landing page? I have two buttons for visitors to navigate from said landing page so I wish to remove the nav links to avoid confusion. I have side question too, I'm struggling to find a solution for reducing the space between the two buttons I previously mentioned, is there a custom CSS solution to this by any chance? I would be grateful for any assistance, I've tried a number of coding suggestions and nothing has worked so far! Thank you! P.S the template is Ventura Screen grab below.
  19. Site URL: https://www.richardsaltermusic.com/ I need a way to add padding/ space so my navigation links drop to the same place on mobile as they do on desktop. Any ideas @tuanphan @bangank36 Thanks in advance! x
  20. Site URL: https://tecomate.squarespace.com Hello! I'm looking for a CSS solution to keep my "shop" link visible in both Desktop and Mobile view on the navigation/header bar. I want it to show as Logo>Shop>Cart. Website: tecomate.squarespace.com Password: mojave Thank you!
  21. Site URL: https://www.oregonfarmersmarkets.org/ Hi there. I'm wanting to add a thin outline around my header navigation font so that the font stands out a bit against a photo background. Does anyone know the squarespace name for this or code? I tried .navigation-header-link, .navigation-header-font. Having a hard time figuring out the code/ code name.
  22. Site URL: https://www.resetyogahub.com/ Hi all! I've managed to ADD my MindBody 'Login' widget to my header next to my navagation links, but would now like it fully removed. Tried going back into Advanced - Code injection - Header, but it's already blank. Any ideas? Bet it's simple! Thanks 🙂
  23. Site URL: http://ribetmyles.co.uk Hi there Wondering if anyone knows of a way I can create custom navigation items on an individual page of my site. Essentially my client is running a google ads campaign and has asked me to create new page with out any external links. They want the existing navigation (that currently links to different pages) to become anchor links, that link to specific parts of the webpage. (What we do, Meet us etc) which I can implement no problem through the link function. However when I do this, it then duplicates across the navigation of the whole site, which is not the desired outcome as I'd like the others to remain as page links. Any help here would be greatly appreciated! Thanks Rhys
  24. May I know to to adjust the space between the text and line (hyperlink) for each header on mobile navigation menu? The tricky point is that the line fits well for English but not for Chinese - as you see I highlighted on the cap screen, the line strikes through the Chinese text.
  25. Site URL: https://www.reneknabl.com/ Hello guys, I have issues with my custom CSS code for the Navigation Folder Link. My Version is Squarespace 7.0 Brine and I got a Business Plan. In the Navigation Menu I want to link the Dropdown Folder "Work" which now has the URL /portfolio-dropdown to my starting page, which has the URL /portfolio I tried several methods, then with this one it worked. But only the first time loading the page. When I tried to click on "Work" again or refresh the page, it linked to /portfolio-dropdown again. What am I doing wrong? Many thanks in advance Code in the footer: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.Header-nav-folder-title[href="/portfolio-dropdown"]').attr("href", "/portfolio"); }); </script>
  • Create New...