Jump to content

Search the Community

Showing results for tags 'navigation-link'.

  • 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. 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
  2. I have a permanent side nav bar and now want to add links to it. Despite the information being coded correctly (if I right click to new tab it opens the correct destination), but the links are un-clickable even with me inputting destination openings ('_self' & '_blank'). Any advice? Site: https://www.dantelavell.com/home Current Code: <div class="nav-container"> <div class="nav"> <a href="#about">ABOUT</a> <a href="#projects">PROJECTS</a> <a href="#contact">CONTACT</a> <a href="/prints" target="_self">PRINTS</a> <a href="https://www.createavra.com/" target="_blank">AVRA</a> </div>
  3. Is it possible to make the QR cod for my shop, collection? I have some collections, and one of them now on the exhibition - so, I would like to make more easy to open immediately page with that collection
  4. Hi there, my site is www.stelaonda.com I would like for my navigation menu items to display on mobile, but I can't figure it out. If you access the webpage via mobile, you'll see that only the hamburger option is visible. How do I show the menu items as well? For reference, please visit www.glossier.com - you'll see that their nav bar displays the categories even on mobile view. Is there css code that could help with this? Thank you!
  5. Site URL: https://wisteria-falcon-8d7z.squarespace.com/ Hello! I'm currently making a website for an at-home preschool setup. I'm trying to hide certain aspects of the header (mainly the clickable links of Contact, Bio, and Vision) because I wanted to consolidate them to the footer of the page. I tried looking up the collection ID to hide certain elements based on this solution I found through googling, but I can't seem to get it to work right. So how do I find the id's of the relevant header links I want to hide? And how do I code them to be removed from the header? Any help at all would be greatly appreciated, thank you! Just realized it wasn't accessible since I'm still working on it, I made it accessible via password, and the password is: help
  6. 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!
  7. Hello, I have two brands on my site. 1. Church 2. Counseling https://www.texasgrandchapel.org/counseling-home I want to be able to hide specific folders in footer on specific page. As seen below of the folders in footer I want hidden for specific pages. Is there an easy way to do this in advanced CSS?
  8. 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!
  9. 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
  10. 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.
  11. 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.
  12. I'm trying to make sense of a website I've inherited. So I'm trying to add some sections to some pages. I looked under pages, but I cant find them. There are links to pages in the primary navigation but I cannot find those pages anywhere. They are not in the "Not Linked" section or under any other navigation. Help?
  13. 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
  14. Hello, In my navigation bar I have customized all of the folders and page links to have icons. The 'contact' folder in the navigation bar has a drop down menu so people can contact us via IG, FB, email or phone. I cannot figure out how to put icons next to each of these links. I don't have the code for it because they are in a folder and they are external links not pages. This is the code I was trying to use to put an Instagram logo next to the 'Instagram DM' link in the nav folder: /*Instagram DM */ .header-nav-folder-item [href="https://www.instagram.com/supersizesocial/"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/635e87c54b39565ec8ba2fa4/1667139525562/Instagram+DM.png); background-size: contain; width: 23px; height: 23px; display: inline-block; margin-right: 10px; top: 4px; } I think the issue with this code is that bit at the top: header-nav-folder-item I have also tried to use: header#header Can someone send me the correct code to add an image and make adjustments to these external links that are inside a navigation folder. Furthermore, one of the links is a phone number so people could call us via skype when clicking on it, the other is an email link which will open up their inbox. Perhaps different codes are required for these as they are different kinds of external links. Appreciate any help I can get! Thanks
  15. Hi, I realized an issue with my client's website design where I wanted to keep the "2nd button" styling for the "ORDER" button on the main mobile mnu page, but not wanting the nth-child rule to apply to folders. Is there a code that can help me keep that from happening (ie. I don't want any other nav item to look like a button except "Order" and "Get in Touch")
  16. The only links I need in the navigation bar is - Films - Photography I have other pages within Film and Photography but I have an image grid on these pages that users can click to visit them. How do I remove these other links from the main navigation in header?
  17. Breadcrumbs are cut off.. It could be because of a css that was added to underneath header. please help!
  18. i have a background image that is pretty dark. the text and logo in my navigation is also dark, for project pages how can i customize which logo image and font color to use? individual project pages do not have custom <head> section under the advanced area of settings. thanks!
  19. Hi. I am looking for a way to create a non-clickable menu item. Basically I just want some text in the menu item. We previously put some code above the menu (as below) but would like it in the menu (Performance) being the new addition to the menu: I found a article on making a folder non-clickable however that code didn't actually seem to work for me (I'm assuming user error) and I still have the box drop down under the menu (see below) So I'm looking to add a page that's non clickable Or a folder where I can hide the box that appears or just some 'text' to the start of the menu. Any ideas? https://bullfrog-flatworm-k899.squarespace.com/ Pwd: PaulFarina
  20. Hey @tuanphan or anybody who can help...I am wondering how I can create the effect when you click the bell in the top right corner on this page https://www.elevationweb.org/best-nonprofit-websites/ for the nav button on my own site.
  21. Site URL: https://www.sabustudio.com Hi, I have set up my navigation for desktop, it is all working as I want on desktop, although I am having issues with it on mobile device. On desktop I have integrate this code so the folders redirect to specific pages: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('.header-nav-folder-title[href="/furniture-folder"]').click(function() { window.location = "https://sabustudio.com/furniture"; }); $('.header-nav-folder-title[href="/object-folder"]').click(function() { window.location = "https://sabustudio.com/object"; }); $('.header-nav-folder-title[href="/lighting-folder"]').click(function() { window.location = "https://sabustudio.com/lighting"; }); Although, on mobile the folder navigation does not utilise the redirect link as it does on desktop, it just links to the folder contents. It currently goes as follows: I would like it to go: I am trying to remove/bypass the second hamburger menu page and instead wanting to use the redirect link. This enables better user experience for my product. I'm not sure if its possible to do this, but I imagine there would be a way to do this. Any help would be much appreciated! Thanks
  22. Site URL: https://www.theenrichededucator.org/ Hello, I am trying to figure out some CSS that will highlight the appropriate item on my header/navigation bar with a visitor is currently on one of the pages in the folder. I have switched the Style Editor setting to "Active" already. This works for regular pages in my navigation bar; turns the item from Red font to Black font when the visitor hovers and/or is currently on the page. However, this effect does not work when the visitor is on a page within a folder; the hover effect works but the Navigation Item doesn't stay in Black font. I should note that the pages within my dropdown folders are links to non-linked pages in my site. I am using Brine 7.0 and have some basic/intermediate knowledge of CSS. My ideal outcome would be (using the screenshot below): The visitor is currently on the HOME page, which in the nav bar "HOME" is in Black font. The visitor is also currently hovering over "WHO WE ARE", which is also in Black font on the nav bar. Currently, what happens when the visitor clicks on "OUR TEAM", the visitor will be taken to that folder link (which is an anchor text within a non-linked index page) and the nav bar item "WHO WE ARE" stays in Red font. What I'd like to happen when the visitor is on this page (and others like it) is for the nav bar item to be in Black font. Is this achievable with some CSS?
  23. My navigation links did not transfer over to my mobile version of my site. The support chat man said they are collapsed but they can't help me with it because it is code. Does anyone know how to fix this?
  24. Hello - I'm trying to hide the "Home" link in my navigation in both desktop and mobile, since the logo/title serves as a home function. I'm not seeing any way to do it through settings, so I'm assuming I'll need to add some CSS (and not seeing the specific question in the forum). Thanks in advance for any help!
  25. @tuanphan or anyone else who can help... I just randomly started getting this problem with the navigation menu on my site, I'm not sure whats causing or if there's a problem with my code. I have attached a photo below for reference.
  • 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.