Search the Community

Site URL: https://www.brubike.be/ Dear Forum, Would it be possible to link to a dropped down menu instead of a page? With other words: creating a link (other than the link in the navigation) that triggers the dropdown menu instead of going to a page? My request is mainly important for the mobile navigation, but it would be interesting to know if this works for dekstop navigation too! I hope making it visual will help: The homepage indicates various languages with images (collage) including hyperlinked text: Dutch, French and English: Clicking on the top image (Dutch) brings you to the first Dutch page (Welkom): the first item in the dropdown menu of the header navigation: However, it would be great if, instead, you would be brought to the drop down menu itself: Is this at all possible? I hope you can help! Thank you so much in advance 🙂 Kind regards, Celina

Site URL: https://www.marissamae.com/ Hi all! I'm trying to find a way to make it obvious that people need to scroll down for more content on this page of my site. I was hoping that I could add an arrow to the center bottom of the page, but am not only having a hard time finding the proper coding to insert, but also don't know that the arrow would show up against my shirt. My home page layout matches with this page layout, so I don't want to shrink the size of the photo or change the photo arrangement. I need to find a solution that can work with this current layout. Any recommendations would be greatly appreciated! Thx! -Marissa

Site URL: https://www.mozerisfineantiques.com/ Hello, I have an issue, where my navigation and logo are visible on the home page. When you visit my shop page in jewelllery section, the page background is white, then my logo and navigation is no longer visible. How can I change this just for one single page, as im on 7.1 the colour themes end up changing on all website. I have highlighted below on what I mean. Thanks any help is greatly appreciated! Please let me know if I've been unclear.

Site URL: https://tinaleecreations.com Hey guys! So something weird is happening with my Mobile Navigation on my client's website. For some reason it displays this white bar across the top mobile navigation. Any suggestions on what is causing this? I have never experienced this and it's so weird! See photo attached. Website: https://www.tinaleecreations.com/ Password: tina I would love some help on figuring this out 😞

Site URL: https://tinaleecreations.com Hello, I was wondering if anyone knows how to space out the footer navigation links so that they're not so smushed together? Example site: tinaleecreaitons.com password: tina Would love to know this as it's been an issue of mine or a while.

Hello ! I'm wondering if there is any way to modify the index navigation tool in Brine template, so it can display sections titles at all time. I'm talking about this kind of side bar, displayed as dots, radio, or bars... The sections titles are only visible while you hover the dots. The idea would be to keep them visible, so it would look like a index side menu. Thank you !

Hi Non-designer new to 7.1. Want the navigation bar to be higher than the banner image so that all the banner image is displayed rather than the nav bar covering some of the banner image. Some of the pictures of people in the banner have their heads cut off if it isnt set to transparent. Site isn't published yet. Thanks in advance

Template: Forte Hi all, I setup folder links using <a href="url slug"> to link to an alternate menu, but they have since ceased to work. Thinking that it might have been some issue with the relative addresses, I have tried using external addresses to no avail. Ling.

Site URL: https://www.brubike.be/ Dear Forum, Is there someone who could help me figure out how to remove the word "Back" in the mobile navigation menu of the Carmine template? The HTML of the element is: <a class="header-menu-controls-control header-menu-controls-control--active" data-action="back" href="/" tabindex="0"> <span class="chevron chevron--left"></span><span>Back</span> </a> My request is simply to remove the word "Back" from the <span></span> so that only the chevron (arrow) remains. See screenshots attached to illustrate. How do i write this in the custom CSS? Thanks so much in advance for your help! 🙂 Kind regards, Celina

Site URL: http://www.home-editions.net hello, I try to make a page without the template and navigation used - is it possible ? thanks Olivier

Site URL: http://www.rosie-brock.com/ Hey does anyone know how to replicate this "Prev/Next" and "Show Thumbnails" for a page that has a slideshow gallery block? Is this an older version of Squarespace? I believe this is done in WELLS template. I've tried adding text to Header Content, wrote out "Show Thumbnails", and linked it to a private page that contains a gallery grid. I brought the text to the bottom left corner of the website using a spacer. Issue is that this text is fixed, so clicking "Show Thumbnails" will always bring the user to the exact same gallery grid. Here's two other websites that have this same feature: https://www.kovikonowiecki.com/ and https://www.tarekmawadphoto.com/ I appreciate any help I can get. Thank you!

Hey all, I'm hoping you could help - I set up my website and for some reason, my navigation links at the top of my homepage have totalled disappeared! The pages still exist, but the links are gone. Any advice appreciated! Thanks in advance, Becky

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>

Site URL: https://www.thulephoto.is Hi guys. I'm trying to build a small porfolio site using Wells. It is in Icelandic so I am trying to get rid of all English in the template. On the mobile version the navigation is a dropdown (I think you would call it) and it's called "Menu". This is of course not going to work. So I would like to exchange that word for the hamburger icon. How can I do this? I am on the personal plan but willing to upgrade to the business plan if necessary. I'm not a coder but still IT savy. Thanks

Hi, I have always used <a href="page-slug">page-title</a> in my folder navigation to create a direct link. For some reason this has stopped working. Does any know another work around for this?

Site URL: https://photoguy.com Hello. I did search but didn't find my answer in regards to 7.1 navigation menu as the screen is reduced for smaller devices. In wordpress I was able to adjust the cutoff parameter for the screen size reduction for mobile devices. With my Squarespace 7.1 site, as the screen width is reduced, the header navigation starts to create a second line....which looks terrible. I attached an image to help explain my situation. Is there CSS or a setting that I may have missed in the Squarespace settings? Thanks.

Site URL: https://hampseshop.com Is there a way to display categories in footer? I'm using squarespace 7.0 https://www.hampseshop.com Jones Template Thank you in advance

I'm building on Brine, and I'm using fixed headers.I have no issue with how to make those work, nor with using either .site {padding-top: 90px;} or .index {padding-top: 90px;} , depending on what's needed. My issue is that when I have navigation (on index pages) that relies on anchors, like site.com/#about , my header covers my headline. I could insert a spacer, but then the site looks oddly spaced and lame. I can write links with an <a class="anchor" href:... and then use the stylesheets to create .anchor {padding-top: 90px;} The problem with this solution is that I want for my clients be able to make changes via the standard SS UI, after I hand it off to them. How do I make this work within the existing structure of Squarespace?

Does 7.1 support sidebar navigation like the Wells template. If not, is there custom css code?

Hi all, I'm using SquareSpace 7.1 and I hate the way the top navigation stacks onto two lines because of the # of navigation items I have. See reference below: I was able to fix this by adjusting the width of the nav header with css but now it's off-center. See code & screenshot for reference below: .header-layout-nav-center .header-nav { width: 100%; text-align: center; flex: 1 1 100%; } I've hit a bit of a wall with this. Any ideas for how I can center the navigation while keeping it at this width to avoid it stacking? Thank you in advance, I appreciate it.

Site URL: https://grouper-copper-fkpt.squarespace.com/ Hey all, Since my navigation bar is transparent and is containing white text, I need to add a drop shadow to the button, nav-links and title inside of the nav-'box'. I've tried each and every method that have been posted online, sadly without any success. Thus any help would be appreciated greatly. As said in this post title, I'm using SQSP 7.1. I'll be happy to answer any further questions. Thanks a-lot!

Hey! I'm using the new Squarespace 7.1 and am having some troubles finding any info on making the nav break at a certain point to enable the mobile hamburger icon for desktop. I don't want their typical nav for desktop, just wanting to have the hamburger icon across all devices. Thanks for any help! https://chameleon-porcupine-c7jc.squarespace.com/ password: 1234

Hello! I was wondering if it was possible to have a mobile sidebar menu? I prefer this style over the default mobile menu on 7.1. I’ve tried researching a plugin for this but I haven’t had any luck so far. I know Shopify offers this option on their app but Squarespace doesn’t. I’ve attached examples of what I would like! Please help, any assistance or recommendations would be appreciated.

Hello, I am working on a website for a costumer, and he wants to have his number (clickable) in the navigation menu. I know that I can make a link, and add it to the menu, but I want it to stand more out than the rest (maybe bold), and to display beside the blue button (Prøv gratis). Is this possible somehow?

We have a homepage with a video plaing in the background and our company Logo already in the centre, I'm trying to add an invisible button over the top that navigates to our main navigation page. Is it possible to add an invisible square button on top of this logo that navigates to the main page or a semi transparent box that only appears when hovered over so that it doesn't obscure the video? Edit: To complicate things a bit the page I'm trying to add the button to is a cover page which seems to be more problematic to amend using CSS, any advice on the best option for creating the page described would be much appreciated whether that means amending the current cover page we have or remaking the cover page to replicate the basic cover page. In the end we want to have the homepage of the site be just an automaticlly playing full page video that loops with nothing else except a discrete button in the middle navigating to the full website.