Jump to content

Search the Community

Showing results for tags 'navigation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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


  • Events Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://www.mahacreative.co.nz/ Hi, I'm trying to have a tab like style side nav similar to this - would anyone know how to do this? I found this Code pen for something similar but I'm not sure how or where to add it https://codepen.io/skkhan/pen/MWWdXbb
  2. Hi! I would love to add a button with 'back to all work' in between my portfolio pagination (see screenshot). The only way people can come back to my homepage now (which is also the start of my portfolio page) is to click my logo in the header or footer, or click 'werk' in the navigation. I tested my website on some people and they really miss a clearer option. I found some codes online offered by @tuanphan, but unfortunately they don't do anything for me. The codes are the two added underneath. Can someone maybe help me with this? Thank you in advance! password: Illusterre2022 https://illusterre-sample.squarespace.com #19. Add Button to Pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> <style> /* Portfolio back to button */ a.portfolio-backto .item-pagination-title { background-color: black; color: white !important; padding: 10px; } </style> and #20. Add “Back to all projects” under pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script>
  3. Site URL: https://www.buffconceptstore.squarespace.com Help! Looking to create a header navigation like this: https://merchery.co/ I'm close, but struggling to add an appropriately sized border around the menu items (shop/services/cart) and then changing the button to fill that last section. If the latter is too difficult, then happy for it to be contained in a box! Password: hello
  4. Hello! I've got a custom navigation request from a client... I've mocked up what I'd like to do: 1. Remove the current animated underline on the navigation hover / active. (I found code to do this but it is NOT working for some reason!) 2. On hover & active states, I'd love to do a large width background change / text color change. 3. I'd love the navigation bar area to be full width & have a light gray background. 4. Because of the width of the nav bar, I think I'd like Tablet size to follow the Mobile nav bar instead of Desktop. See mockups attached. I know some CSS but not enough to make this happen.... Thank you so much in advance for your help! www.nngarage.com pw: nngarage2020
  5. Hey all! So I've got a weird issue on my site. You can find it at the root index: https://hisnameisjoel.com. I have a Cover Page that has its menu alignment below the main header text, aligned at the bottom. The class is sqs-slice-group bottom-full-width When the vertical resolution drops to less than 600px tall (either on older devices like iphone 7, or when turning a phone screen horizontal, also shows up when setting resolution manually in developer tools) the navigation suddenly jumps to the top of the screen and is now covering over the header text, with the nav buttons intersecting the title and making a mess. I've noticed that the class changes to: sqs-slice-group dropping the bottom-full-width class. Is there a way I can force the cover page navigation elements to always keep the bottom-full-width even on lower vertical resolutions? Normally I wouldn't say this is much of an issue but it does show up on my wife's iphone and when rotating the phone horizontal so want to make sure it stays correct if at all possible. I know some basic CSS but I don't know how to force squarespace not to change a class. Any help you can give is appreciated. Thank you!
  6. Hi, trying to add a new folder to the navigation bar with multiple pages underneath . But the text is not showing only the background color. I checked the CSS but can't figure out the reason behind it. Anyone got any ideas? /Tony
  7. Hey, as stated In the title, I'm looking to change the navigation arrows of my slideshows to ressemble those of a reel slideshow. Can anyone help me? Here's the link to my website: https://www.euphoricstudios.com/architecture/open-house Thanks in advance!:)
  8. I went to check my website on mobile this morning and it isn't showing up at all (basically invisible) but still clickable. I haven't changed anything with my navigation in a long time, so I have no idea why it wouldn't be showing up. The font color isn't the same as the background color so that isn't the issue either. Really needing some help trying to figure out why it'd all of a sudden become invisible on mobile!
  9. I'm using the following code to place the logo in the center with navigation items on each side. Somehow the distance between the nav. items on the right and the logo and the nav. items on the left and the logo are not the same. I cannot find the way to keep them centered. Attached an screenshot. /*Secondary Navigation */ .header-display-desktop .header-title { height: 8vw !important; display: flex; align-items: center !important; justify-content: center; } .header-display-desktop .header-nav { position: absolute; top: 0; margin-top: 0 !important; height: 8vw !important; display: flex; align-items: center !important; justify-content: center; } .header-display-desktop .header-nav-item:nth-of-type(2) { margin-right: 40vw !important; }
  10. Hey guys! Need a little help here. I'd like to align the first item in my navigation to the left, besides my logo. I found a few pertinent entries here in the forums but couldn't exactly get it to work. As my website is now, i'd like to move my "examples item" next to the "FAQ" item, but leave the "mixdealers" item next to my logo. I'm using: .header-layout-nav-right .header-nav-list { display: flex; justify-content: left; margin-left: 10px !important; } .header-layout-nav-right .header-nav-item:last-child{ margin-left: auto !important; } I played with the first-child, nth-child(2) pseudo-classes but got nowhere. I either moved everything or nothing. Can someone help me out here, please? Link: http://www.mixdealers.com Thank you!
  11. I'm trying to create an arrow on my header that, when you hover over to select something, shows an arrow that rotates 180 degrees, and stays rotated until you leave the dropdown menu. The issue with my current code is that it rotates how I want when you hover over the navigation header title, but when you go to select something from the menu, it rotates back to its original position. Here is what I have currently. Is there a way to make it so the arrow stays rotated when I'm hovering over the entire dropdown menu section? .header-nav-folder-title:after { content: '\F107'; font-family: FontAwesome; display: inline-block; padding-left: 4px; padding-right: 6px; padding-top: 3px; transform:rotate(180deg)}; .header-nav-folder-title:hover::after{ transform:rotate(0deg)}; The website is currently shareable with password, if you need access beyond the code, message me and I'll send it to you. Thanks!
  12. Hi there! I have a custom dropdown menu that appears upon hover on my main folder title. I'd like to create another dropdown menu identical in appearance, that appears beside it upon hovering on the "Work" page title in the initial dropdown menu. This menu would navigate to two difference pages for two different types of work. Ideally either the menu expands to include these options or a separate dropdown appears beside the original one. Is this possible? Thank you! Michael
  13. Hello, I am would like to create a split navigation using the code from Station 7, see here /*Make split navigation*/ .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(2) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } This used to work perfectly fine, but since using Fluid Engine, the split does not work anymore and the links are all pushed to the left side. Is there any way to make this work in Fluid Engine? Thank you for your help.
  14. If you look at my page, I have a couple navigation links and a phone number. I'm happy with everything except for the phone number. I'd like to make it separate from the other navigation links and even make it bigger and change the font style if possible. https://www.lakeshoreexteriorcleaning.net/ Would this be possible?
  15. Hi all! I am looking to customize my website a little bit more by adding chapter buttons on the right side of my page. I was able to make a button in a fixed position, but I am having a tough time implementing multiple buttons that will smoothly transition to specific part of the page. Is there a way to do this? See screenshot below -
  16. Site URL: http://chapter3.ca My page isn't published yet. I am setting it up on behalf of a client. I am using the Grow Well template. Rather than separate pages for each navigation link, all of my content is housed on one page. For my page navigation I've used links and applied the anchor link for each unique section id. They are as follows: chapter3.ca#about chapter3.ca#how-i-work chapter3.ca#service-areas chapter3.ca#team chapter3.ca#contact However, I want to also include a blog. This URL would be chapter3.ca/blog. When a user navigates to the blog, the navigation menu is now appending #about, #how-i-work. etc. to include /blog. (chapter3.ca#about becomes chapter3.ca/blog#about). When I changed the links in the navigation section of pages to include the full URL, this takes away seamless scrolling navigation on my main page. It tries to fully re-load the page and then jump to the section instead of just navigating up and down to each seamlessly. Is there a way for me to either use a different header for the blog or remove the header on the blog entirely. If I have to remove the header, I will likely add a back home button or links to the main page as separate navigation. Thanks in advance.
  17. Hi guys, I am wondering if anyone has an easy solution to having a dark and light version of the logo that works with the colour settings in the nav/header? For example, the logo looks great in white on a banner image but when I have a page that doesn't have a banner image the logo is lost on the white background. Site URL: https://www.beyondjanebeauty.com Password: maint8n Template: Sonny Version: Squarespace 7.0 Thank you in advance!
  18. Hi. I have 2 navigation items and 2 pages. In each page, I have to hide one navigation item. How can I do this?
  19. Hello! I was hoping to get some help with the mobile view of my website. Recently, I've noticed that when users go to click my hamburger navigation to open up the menu, the color of my banner flashes white, instead of staying orange. It used to stay consistently orange and looked very seamless when the menu pulled up. Does anybody have some advice or possibly know what section I need to tweak to correct this flashing? Thank you so much for your help and time. My website can be found here, and I've also attached a screen recording of the issue on my mobile view! RPReplay_Final1668979800.mov
  20. Is it possible to make certain navigation items in the top menu appear as buttons instead of regular text links? I'm not talking about the "button" option for the last menu entry in the header. I want to make other menu entries appear as buttons.
  21. Hi, I'm trying to get the Hamburger icon on the navigation bar to change to an X when hovering mouse over the menu and menu expands on desktop version (kind of like it does on the mobile version) I've tried a few css codes I found online but nothing working so far.. Anyone an idea how to do this? Website is https://pigeonhousedelgany.squarespace.com password: Peanuts Thank you, Annabelle
  22. Hi, Is there a way to have the index to show the Page Title instead of the Navigation Title of the Galleries? Thanks, Celso
  23. Hello! I designed this site in 7.1 and would simply like to remove the underline on the active navigation link. This is currently not an option in the Design section of 7.1, so I will need some CSS. Any ideas? https://www.pamelaackerman.com/ Thank you!
  24. Hey, so I finally figured out how to do same page navigation using code block anchor links and smooth scroll on my homepage. Right now, the navigation for "about" and "projects" all link to their respective anchor links on the homepage by linking to #about, #projects. But when I'm on any other page but my homepage, these navigation links don't work unless I specify the url slug and use /home#about, /home#projects - this would be fine except every time I click those links on my homepage, it doesn't smooth scroll down to the right section but will refresh the page first then scroll down. I don't want it to refresh when I'm already on the homepage but if I change it back to #about, #projects again, the links won't work on any other page. To better understand my issue, you can click the "contact" link in my navigation menu (it currently uses /home#contact) and you will see that it refreshes the page first before scrolling down to it. Meanwhile "about" and "projects" are using #about and #projects only, which will work as intended on the homepage but not when you're on a different page e.g. https://www.saaniajamal.com/presentations. Ideally, if I could just have different navigation links for the homepage and all other pages, this issue wouldn't even exist. But I've spent hours finding a solution and have reached a dead end. For the record, I am on the individual plan, not the business one so I can't mess with Javascript unless I upgrade. PLEASE SEND HELP SO MY PORTFOLIO CAN GO LIVE SOON.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.