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

Search the Community

Showing results for tags 'navigation'.



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 Topics
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Topics
  • 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

Found 623 results

  1. I added font awesome icons to navigation menu in Squarespace 7.1. I was tagreting 6 main categories with this code .header-nav-item:nth-child 1..2…3..4..5..(5)..6 a::before { and it works perfectly. Question is what would be the code to target subcategories in each of the main categories? Thanks!
  2. Site URL: http://www.hadassi.com/home Hi all, wondering if you can help me? I need this website to have navigation in the footer menu on desktop as well as primary and secondary navigation. However on mobile I need all of these to consolidate into the hamburger (nothing to be visible on the footer). Can anyone help?
  3. Site URL: http://www.breatheportugal.com On my website (www.breatheportugal.com), I see an unusual configuration of the nav items on the top. Sometimes they are displayed horizontally (this is the right way), but lately, sometimes, they are stacked on top of each other. I attached two images with the situations described above. I know it does not necessarily has to do with the responsive design because I am seeing the website on a 13-inch full screen and it still shows them stacked. Thanks in advance!
  4. Hi, I'd like to learn how code or advice for how to lower my navigation bar to be in line with the company name text in the logo. I would like your help please in seeing if it is possible to format this for a version 7.1 desktop. Please see reference attached of how it displays now, and where I would like for it to display in line with red bar as a guide in the second reference image. Any help is greatly appreciated! Thanks so much!
  5. How do add a secondary or footer navigation in 7.1? This was so easy in 7.0 and cannot find anything for 7.1
  6. Hey, I was wondering if anyone can suggest a way to have the hamburger navigation menu, which is organized in the usual folder structure, on a single page, where the folder elements are accessible by scrolling rather than clicking. Ideally the folder names would still be listed in a seperated font or something. The folder structure should definetely still stay the same on desktop with the folders popping up when hovering over them. I attached a quick mockup what I would imagine it to look like.
  7. Does anyone know how to do this? Why did this feature disappear in 7.1??
  8. Site URL: https://www.wellwomenpsychology.com/ I am very new to coding and squarespace. I just recently published the website. I am trying to replicate the same scroll effect as seen on this page on stripe: https://stripe.com/customers#b2b-platforms. As you scroll down the page, the second nav sticks to the top and the nav link becomes active by changing color as you scroll through the correct section of the site. Primary Problem #1: So far I have successfully made a second sticky nav under the main banner. The only thing left to do is to have the nav links change color to #46d8cb whenever you press on the nav link or whenever you scroll to the link's page within the Index. It is now day 3 and I am going crazy trying to figure this out. From all my research it seems like javasrcript or Jquery are the ways other people have solved this problem. I have tried several javascript "solutions" but none of it worked as I am sure simply cutting and pasting was my problem. But I don't know enough about the language to understand how to manipulate it. Problem #2: The sticky nav section does not float above content while scrolling in an ipad, mobile, or safari. It only works on my desktop. I just found this issue as I was writing this and I figured I would include it here to see if anyone knows a quick solution. Any help would be greatly greatly appreciated! Apologies that the code below is all over the place. Here is the HTML code I injected directly onto the page within the index: <div id="div1" style="position: absolute; z-index:10000; width: 100%; padding: 0 !important; " > <div id="sticky"> <div id="secondary-menu"> <ul> <li> <a href="/types-of-therapy/#cognitive-behavior-therapy">Cognitive Behavior Therapy (CBT)</a> </li> <li> <a href="/types-of-therapy/#dialectical-behavior-therapy">Dialectical Behavior Therapy (DBT) </a> </li> <li> <a href="/types-of-therapy/#exposure-and-response-prevention">Exposure and Response Prevention (ERP)</a> </li> <li> <a href="/types-of-therapy/#circle-of-security">Circle of Security Parenting</a> </li> <li> <a href="/types-of-therapy/#supportive-or-insight-oriented-therapy">Supportive or Insight Oriented Therapy</a> </li> </ul> </div> </div> </div> <script> $(document).ready(function(){ $("#sticky").sticky({topSpacing:0}); }); </script> And here is the CSS I added to the style editor: /*Secondary Menu for Types of Therapy Page*/ #secondary-menu { border-top: 1px solid rgba(7,96,115,.07); border-bottom: 1px solid rgba(7,96,115,.07); background-color: white; } #secondary-menu ul { list-style-type: none; padding-left: 0; margin: 0; text-align: center; } #secondary-menu li { display: inline-block; padding: 0 16px; text-transform: uppercase; font-family: Walsheim Regular; font-weight: 600; font-size: 18px; color: #8898aa; transition: color 0.8s; text-align: center; white-space: normal; } #secondary-menu li:hover { color: #32325d; } #secondary-menu li.active-link a { color: #4cdacc !important; } #secondary-menu a { display: block; padding: 25px 0; max-width: 170px; } #types-of-therapy-content .sqs-block-code { width: 100% !important; } #types-of-therapy-content .index-page-content { padding-right: 0 !important; padding-left: 0 !important; } For full disclosure, here is the script I copied and pasted into the code injector to make the second nav sticky: <!-- JQuery script to make the bottom nav bar sticky on the Types of Therpay Page --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> (function($) {var defaults = {topSpacing: 0,bottomSpacing: 0,className: 'is-sticky',wrapperClassName: 'sticky-wrapper',center: false,getWidthFrom: '',responsiveWidth: false}, $window = $(window),$document = $(document),sticked = [],windowHeight = $window.height(),scroller = function() {var scrollTop = $window.scrollTop(),documentHeight = $document.height(), dwh = documentHeight - windowHeight,extra = (scrollTop > dwh) ? dwh - scrollTop : 0;for (var i = 0; i < sticked.length; i++) {var s = sticked,elementTop = s.stickyWrapper.offset().top,etse = elementTop - s.topSpacing - extra; if (scrollTop <= etse) {if (s.currentTop !== null) {s.stickyElement.css('width', '').css('position', '').css('top', '');s.stickyElement.trigger('sticky-end', ).parent().removeClass(s.className);s.currentTop = null;}} else {var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;if (newTop < 0) {newTop = newTop + s.topSpacing;} else {newTop = s.topSpacing;} if (s.currentTop != newTop) {s.stickyElement.css('width', s.stickyElement.width()).css('position', 'fixed').css('top', newTop);if (typeof s.getWidthFrom !== 'undefined') {s.stickyElement.css('width', $(s.getWidthFrom).width());} s.stickyElement.trigger('sticky-start', ).parent().addClass(s.className);s.currentTop = newTop;}}}},resizer = function() {windowHeight = $window.height();for (var i = 0; i < sticked.length; i++) {var s = sticked; if (typeof s.getWidthFrom !== 'undefined' && s.responsiveWidth === true) {s.stickyElement.css('width', $(s.getWidthFrom).width());}}}, methods = {init: function(options) {var o = $.extend({}, defaults, options);return this.each(function() {var stickyElement = $(this);var stickyId = stickyElement.attr('id'); var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName var wrapper = $('<div></div>').attr('id', stickyId + '-sticky-wrapper').addClass(o.wrapperClassName);stickyElement.wrapAll(wrapper);if (o.center) {stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});} if (stickyElement.css("float") == "right") {stickyElement.css({"float":"none"}).parent().css({"float":"right"});}var stickyWrapper = stickyElement.parent();stickyWrapper.css('height', stickyElement.outerHeight()); sticked.push({topSpacing: o.topSpacing,bottomSpacing: o.bottomSpacing,stickyElement: stickyElement,currentTop: null,stickyWrapper: stickyWrapper,className: o.className,getWidthFrom: o.getWidthFrom,responsiveWidth: o.responsiveWidth});});}, update: scroller,unstick: function(options) {return this.each(function() {var unstickyElement = $(this);var removeIdx = -1;for (var i = 0; i < sticked.length; i++){if (sticked.stickyElement.get(0) == unstickyElement.get(0)) {removeIdx = i;}}if(removeIdx != -1){sticked.splice(removeIdx,1);unstickyElement.unwrap();unstickyElement.removeAttr('style');}});}};if (window.addEventListener) {window.addEventListener('scroll', scroller, false); window.addEventListener('resize', resizer, false);} else if (window.attachEvent) {window.attachEvent('onscroll', scroller);window.attachEvent('onresize', resizer);} $.fn.sticky = function(method) {if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method ) { return methods.init.apply( this, arguments );} else {$.error('Method ' + method + ' does not exist on jQuery.sticky');}}; $.fn.unstick = function(method) {if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method ) { return methods.unstick.apply( this, arguments );} else {$.error('Method ' + method + ' does not exist on jQuery.sticky');}};$(function() {setTimeout(scroller, 0);});})(jQuery); </script>
  9. When I am viewing my site on a mobile device, the navigation works fine. Until I rotate the device. Then the menu button appears, but once open all that is in the navigation is social links, no actual menu items... How do I fix this?
  10. Site URL: https://niall-cochrane-dcb3.squarespace.com/config/pages Hi I have recently moved to the Fulton template and have almost completed my new site but there are a few small things that I can't seem to figure out; 1. The Navigation icon to the top left doesn't scroll down with the page, is there a way to do this? I think it does it in the template but I must have turned it off somehow. 2. How can I show the Social Icons? I've looked but can't find how to do this. 3. Is it possible to have the navigation and logo at the top of the page stay there when scrolling? Thanks, N
  11. Site URL: http://www.allergyme.com I'm trying to change the color of just one of the navigation links in the Five template, specifically the second one, but I can't seem to find a code that'll work. Does anyone have experience with this?
  12. 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?
  13. Site URL: http://www.wearethirdspace.org Hiya, I'm trying to stop the folders in my navigation menu linking to the first item on their list. I've tried using code from this thread and this thread in my CSS, and even adapting the header code injection from this blog - but none of that has worked! Can anyone help? I'm using Bedford. Thanks! 😅
  14. Hi All, Many Squarespace website when you land on them don't show ANY navigation link highlighted. When I go to my website, I always have the first navigation link in my top navigation highlighted. My website is valeriiasedlak.com and when you land on it, you see a link "explore art" in top navigation highlighted. URL shows "valeriiasedlak.com" not "valeriiasedlak.com/explore-art". I think it's a problem for SEO. When I go to my Google search console it show that "valeriiasedlak.com" was indexed but not submitted in sitemap. Why? Can I fix it somehow? Thank you.
  15. Site URL: http://www.keekboudoir.com I cannot figure out how to get my navigation to show on my website, it just shows the drop menu icon and wont change to the words across the top. I'd like to have the words stay across the top and get rid of the side bar menu. Can anyone help me?!?! @tuanphan
  16. Site URL: https://www.guilledelcastillo.es This morning I have set up the primary nav on the TOP left and the logo on the top right. Yesterday, the place of the primary nav and my logo was set up on button left and button right... As a result of this change ... the main image of my website has changed its appearance. I attach two images to you. I want to be able to have the configuration in TOP LEFT AND TOP RIGHT and that the image looks like BUTTON LEFT and BUTTON RIGHT. Its possible? Only with the main page picture. Thank you so much for your help. U are a master!!!! @tuanphan Set up in TOP (nav and logo) Set up in BUTTON (nav and logo) I want set up in TOP but the same apparience of my main page (picture) as BUTTON set up.
  17. Site URL: https://wolf-cube-3k56.squarespace.com Can anyone recommend CSS to add so I can spread out the items in my drop-down nav? I've already added CSS for line height, but I don't know the tag for the space between the line items. I have links that are two lines long, and I need additional space so there's more separation. Also, is there a way to add padding to the bottom of the container box? Thanks
  18. Site URL: http://www.reedgibson.com Hey! Im currently trying to change my font on my website in the gallery navigation controls to a custom font that I've created. So far I've been able to change my navigation side bar but can't seem to figure out the code for the gallery controls. Can anyone help? Thanks!
  19. Site URL: https://jasmeet-kundi-rkyy.squarespace.com/ Hi can anyone help with custom css, I would like to make the selected menu and sub menu item bold from the navigation on the WELLS theme.
  20. Site URL: https://www.michellekaplanpoet.com/ Navigation pops behind the site logo on larger screens. And unable to lock the nav on scroll. Thanks in advance!
  21. Site URL: http://www.arthurkorbielphotography.ca Hey! I want to add a call to action button/highlight button in my main navigation for the last link (Book Now) I've already tried a bunch of other css codes , however they don't seem to work for me. When I add the following code: .main-nav li:last-child a { background: #000; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; } It does exactly what I'm looking for, except for one thing - It applies the look to the last item in of the navigation headings/drop-downs (See Screenshot). I want it only applied to the "Book Now" in the main navigation, not the menu items in the dropdown menus. My website is - www.arthurkorbielphotography.ca
  22. Site URL: https://circle-rose-hc64.squarespace.com/ Hello, I am trying to change the font style in my navigation bar for Squarespace 7.1 , I have looked around and can't seem to find the right code or method to do this. If anyone has any advice that would be much appreciated . Cheers,
  23. Site URL: https://medscosheetmetalfabrication.squarespace.com/ Hello, Need help on having right align a specific sub-menu for a site. The main menu is 'Contact' and the sub menu titles are long, which makes them disappear off the page. Is there any way to right justify only for this sub-menu? password for the site: medscosite Thank you for the guidance and help! Mike
  24. Site URL: https://thevisualpharmacy.com Hey Guys, I'm trying to find the media queries for my shop grid and my navigation bar. When I shrink my website the social icons in the nav bar dissapear, also my grid goes from being 3 across to just 1 to early. I've searched the code using the inspect element but I can't seem to figure out where it's being triggered. Can anyone lend a hand? I'm using the mark novo template.
  25. Does 7.1 support sidebar navigation like the Wells template. If not, is there custom css code?
×
×
  • Create New...