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'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges

Found 174 results

  1. (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.
  2. Hi, in my empty shopping cart it says "you have nothing in your shopping cart. Continue Shopping" the continue shopping is actually a link and it takes you to the store part of the site. But it is the same color and font as the previous sentence. My first instinct isnt to click on it. Is there any way to change the color of it, or to underline it at least so it looks like a link? Thanks!
  3. Hi! I am trying to right align a single navigation link, the one that says 'Info'. I want to preserve the work link on the left. Here's what I have, but it's not working. Any ideas why? .header-nav-item a { text-align: left auto !important; text-orientation: upright; writing-mode: vertical-lr; letter-spacing: -0.1em; } .header-nav-item a[href="/info"] { text-align: right auto !important; text-orientation: upright; writing-mode: vertical-lr; letter-spacing: -0.1em; }
  4. Some of my top navigation has folders with subpages. The folders are clickable to the same page as the first subpage link but don't have to be. When using the keyboard to tab without a mouse, the folders are being skipped over. Only the navigation that are regular links can be reached by tabbing. Is there CSS to add for Bryant / Bedford that will fix this so its accessible without a mouse? I saw some code in the forum for other templates but they didn't work. Also, wondering if there is focus indicator code that will outline it using hsl (0, 93%, 27%)?
  5. Hey all! I'm totally new to squarespace and I'm trying to set up a fairly simple photography website and wanted to have everything on one scrolling page. I have the index page all set up but I can't figure out how to get the navigation bar to link to sections of the index page. For example, I can only get a link to the "About" page to show up in the navigation bar if it's a separate page. If I move the About page to a section in the index page it disappears from the navigation bar. Is there a way to get sections of the index page to show up in the navigation bar, so I can set it up to scroll down to the About section by clicking it in the bar? Thanks in advance for the help!
  6. Site URL: https://coconut-hypersphere-nmr5.squarespace.com/config/ I am trying to make a page in the Header Nav unclickable. I have this code at the moment but it doesn't seem to be working please advise, thank you. a.Header-title-nav[href="/syzygy-is-a-distinct-way-of-aligning-people-purpose-performance"], { pointer-events: none;
  7. Hey guys! I have an issue with redirect (url slug) different pages in my agency website. Struggling to figure out how to connect the same project from Home "Work" portfolio section and Work Portfolio Page. Overview: 1. My site has a Home "Work" Portfolio section where we represent the latest agency work (4 projects) 2. My site has Work Portfolio Page where we represent all agency work (more than 4 projects) 3. My site has the Project Page that I'll need connect to Home Page Portfolio and Work Page Portfolio. The goal is, no matter that user clicks on the exact Project Page in Home "Work" section or from Work Portfolio Page the Project Page will open the same. Is this possible? The Issue is: By using Project Page URL slug I can't refer to the Home "Work" portfolio section and Work Portfolio Page simultaneously. That is a HUGE problem that forces me to switch platform even if my site was ready on 90%. But firstly I decided to make a quick research can somebody else make it real and find out the similar website that was built on Squarespace. Guess what? I've find it https://www.sturdyevolution.com/ where able to open the same project from Home "Work" portfolio section and Work Portfolio Page. My website: https://trumpet-fox-x5bt.squarespace.com/
  8. Site URL: https://lanternfish-salamander-gp6n.squarespace.com/ Can anyone help with this issue, please? Something that works perfectly on V7.0 sites is using https://fontawesome.com/ icons within the navigation menu: V7.0 Result: It doesn't seem to be working on V7.1: Result: This is the method I've used that works perfectly on 7.0 but not on 7.1: 1. Head over to https://fontawesome.com/start and copy the CDN (the big link in the dark box) 2. Go back to Squarespace and go to Settings - Advanced - Code Injection. 3. Paste Font Awesome CDN into the 'Header' section: 4. Hit save. Then in order to use any icons, I search for the required icon on the Font Awesome site and copy the HTML for that icon (for example: <i class="fas fa-home"></i>), then either paste that into a code block on Squarespace for use within any section or paste that into either a page navigation title or into a link description within the main navigation menu. Thanks, Tim
  9. Hi There, I'm using the Novo template. Each square image on the main menu links to a page within the site. How can have some of them link to an external web page instead? Thanks...
  10. Site URL: https://haddock-collie-439x.squarespace.com/services Hi, I am working in Brine in 7.0. I am using direct hyperlinks to create anchor links to individual sections of an index page. (See "Services" menu for an example.) Because I am also using a fixed header, when the link is clicked, the browser jumps to the correct section but the title and first few lines of text of the section are hidden behind the main navigation. Can't for the life of me figure out how to get it to bump down the required 120px to display correctly. Would love any help, please!
  11. Site URL: http://yegtownyoga I don't even know if this is possible. Please tell me if you think not possible and I will stop attempting. I made a folder, it contains four pages, entitled in sequence, "calendar" , "descriptions", "prices" and "specials". They appear in 7.1 as a dropdown from the Folder's name "Classes". They are all copies of the same page. I made it this way because I want the visitor to SEE all their options from the main navigation elements. When they hover over "classes": calendar, descriptions, prices and specials appear in dropdown. On these pages of the Folder, "calendar""descriptions", "prices" and "specials", which is the same page duplicated four times, they can scroll down and see, starting at the top, the calendar, then the descriptions, then the prices, etc. I would like to like to be able, from the drop down, say for example from "Descriptions" to go to that copy of the page AT THE point on the page where the Descriptions begin. I don't know if this is possible or not. Thank you SO much for any suggestions.
  12. Site URL: https://www.mattportch.com Hi, How do I get "< BACK" to go below my navigation project titles? (Select PROJECTS from the hamburger icon top right)
  13. Site URL: https://laurencohenyoga.com/ A friend asked for a quick fix with her navigation menu. I found a workaround but I'd like to find the actual solution. For some reason in the navigation menu, the 'connect' button adds an event to itself that fires the promotional marketing popup on click. I cannot figure out why this event is being attached. If you open up dev tools you'll notice my solution was to add 2 links (1 link, 1 cover page): 1 that links to the connect page (desired behavior) and 1 that links to the popup (undesired behavior, so I set the name to ' ' so it's mostly invisible). It seems I have to include both of these or the link falls back to opening the popup - even though I explicitly set it's href to /connect. So it seems like if there is only 1 'connect' in the nav it defaults to attaching the event/opening the popup no matter what I try - regardless of whether the 1 link is a link or a cover page type. I have looked through all the pages and the marketing section and cannot find anything that sets 'connect' to open the popup. Is there a setting I'm missing? The connect page is a "cover page" instead of a standard page but again couldn't find anything triggering special behavior. I am so perplexed. The event being added: function(e) { a.fire(v.getEvent(e, t, i || !1 === r)) } Thank you
  14. Site URL: https://www.stpaulstrust.org/ I am having the worst time trying to learn the new 7.1 system. It seems to be far less customize-friendly than 7.0, and I cannot figure out how to remove the strikethrough effect on active links in my navigation (which should be an easy enough task). I tried looking in font settings and am now trying to code it out, with no luck there either. .header-nav-item a { text-decoration: none!important; } .header-nav-item a:hover { text-decoration: none!important; } .header-nav-item--active a { text-decoration: none!important; } Has anyone else experienced this issue and have you found a solution?
  15. Hello, I am building a very simple site for a restaurant. The navigation is made-up of simple text links fixed at the top of the site. I would like to be able to keep those nav links visible in mobile as well, instead of the hamburger menu. What code would do the trick? Thanks in advance.
  16. Site URL: https://www.cantatasingers.org Hi there, I have an embed code that I need to add to the navigation. The embed code itself is required because it has some javascript in it that needs to function properly. But it ultimately is just a button I am trying to embed as the last navigation menu item. Is there any way at all to add embeds to the navigation in SS?
  17. Site URL: https://minnow-bison-eb6k.squarespace.com/ I've already added a hover colour effect and an active colour change to the navigation but the colour of the underline that applies to hyperlinks doesn't seem to be changing when active. Is there a way that I can change the colour of the underline? Thanks for any tips! The site password is: password and below is the css I already have in place on the site: /* Nav item color */ .header-nav-item a { color: Black !important; } /* Nav item hover color */ .header-nav-item a:hover { color: #ef5232 !important; } /* Nav item active color */ .header-nav-item--active a { color: #ef5232 !important; } /* Nav item hover color - underline */ .header-nav-item--active a { color: #ef5232; } .header-nav-item--active a { background-image: #ef5232; } @media (max-width: 800px) { .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; padding: 0 10px; height: auto!important; display: block!important; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; padding: 10px!important; transform: none!important; width: 93%!important; display: block; } } @media (max-width: 800px) { .item-pagination-title, .item-pagination-icon { font-size: 15px !important; line-height: 19px !important; } } .header-menu-nav-item a { font-size: 25px; } @media screen and (max-width:800px) { .gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 5vw !important; } }
  18. Site URL: https://www.massifcap.com I am looking to add an additional link in my navigation bar in the form of a graphic (CTA button). Any help is appreciated - thank you!
  19. Okay, So here is a very complicated issue and square space needs to look into this seriously. If there is a solution that i am not aware of, I would be very happy and glad. If anyone has the solution to this or any workaround, Please help me as this is driving me nuts. For sales store Navigation is very important. so i created this by creating category. which looks fine as i have few of them. like in Pic 1 It looks good as long as you are just browsing and as long as you are on the same page. you can click on any category and can easily navigate around. However, as soon as you get into any of the category, the option disappears like this The issue is if i want to go back to another product in the same category or a different category i have to go back to SHOP and then click on the desired category or the next product. I want if there is an option to put the category here. So i dont have to go back to shop and then click on daily again. This way i can easily go to daily category. Please let me know if there is any way to do it or if there is anything wrong i am doing here. Please correct me. Any help would be appreciated. Like square space has this. I just saw.
  20. Site URL: https://rhombus-badger-828s.squarespace.com/ I've set up folders with pages in them. Currently, if you click on the top navigation, or the enclosing folder, it takes you to the first page listed under the folder. I'd like for that top-level link to not be clickable at all. How might I achieve this? Thanks!
  21. Site URL: http://www.evolve353.com Hi I am looking to create a button for my nav bar on both mobile and desktop. I have created a page in "secondary navigation" but would like the link in the navigation to be button so it stands out. The webpage is www.evolve353.com and the page I want to be a button is the "Our Covid-19 Plan" I am using the Nueva template
  22. Site URL: https://www.mattportch.com Hi, Is there a way I could add a shopping cart icon next to my nav icon OR somewhere in the pop-up navigation menu? (I've already uploaded an icon to my custom css if needed)
  23. In 7.1 I can create navigation links to blogs but I can't make them active style so they show underlined when on the page. Is there a way to do this with css? Thank you, Henry.
  24. Site URL: https://hannahrushton.com/info I need to hide a menu item (the "info" page linked above) from a few pages on my website. Please let me know if that's possible! Thank you so much in advance!
  25. Site URL: https://marksantiagodesigns.com Hello, I was attempting to add an underline to the top navigation links, but I encountered to minor edits I haven't quite been able to make adjustments to. I am currently using this CSS: .nav-item.active { border-bottom: 2px solid currentColor; } However, the individual project pages do not have underlines and the text is not centered above the underlines. Is there any way to make this change to the individual navigation links? Thank you!
×
×
  • Create New...