Search the Community

Site URL: https://brandonhuntonline.com/ Question: I'm using flexbox (for the first time, and mostly LOVING it!) but am having the issue of my navigation covering my image on the right. How do I get the navigation to not cover any of my sections? (This also happens when I scroll back to a previous anchor link from the bottom. The top part is hidden under the navigation.) PW: Gamer My CSS: // anchor links - smooth scroll effect html { scroll-behavior: smooth;} //-- Change Button Hover Color .btn:hover {background-color: grey!important; color:#000} .sqs-block-button-element:hover {background-color:grey; color:#000} //-- No Underline Links header a { background-image: none !important; } footer a { text-decoration: none !important; } //-- 50% Split Sections WITH CONTENT IN BOTH .sections { display: flex; flex-wrap: wrap; .page-section { width: 100%; .content-wrapper { box-sizing: border-box!important; }} [data-current-styles*='"customContentWidth": 30'] { width: 30%!important; .content {width: 100%!important;} } [data-current-styles*='"customContentWidth": 70'] { width: 70%!important; .content {width: 100%!important;} } [data-current-styles*='"customContentWidth": 51'] { width: 50%!important; .content {width: 100%!important;} } [data-current-styles*='"customContentWidth": 33'] { width: 33.33%!important; .content {width: 100%!important;} } @media screen and (max-width: 800px) { #siteWrapper & section.page-section {width: 100%!important;} } } //-- Floating Social Links @media only screen and (min-width:640px){ footer{ .sqs-svg-icon--wrapper{ display: block !important; margin: 20px 10px !important; } .socialaccountlinks-v2-block{ position: fixed !important; top: 30% !important; /* Adjust this percentage to move the icons up or down */ right: 5px !important; z-index: 99 !important; } } } /*===Full width Instagram ===*/ section[data-section-id="61a40048e0deb77695c8bf7a"] { min-height: initial!important; .content-wrapper { padding: 0!important; max-width: 100%; } .sqs-row .sqs-block.instagram-block{ padding: 0!important; .sqs-video-wrapper.video-fill { position:relative; } } .sqs-layout > .sqs-row { margin: 0!important; } }

Site URL: https://www.affinityauthorservices.com I am looking to relocate my header navigation below my header banner exactly like this site: https://harlow.showit.site/ I also would like to know how to center my logo and have my links on either side like this website as well! Any help at all would be amazing. I have not been able to find any CSS regarding this and the ones I did find did not work for me. Unpublished/still in progress site: www.affinityauthorservices.com PW: AAS

I am wanting to adjust the layout of the navigation links in my header. The templates provided in site styles do not satisfy the layout that I want and I have yet to find any code that does what I want. All I want to do is move "Contact" to the right side of the header and leave "Work" on the left side. I am able to add a button but the buttons do not achieve the clean look I am wanting. Does anyone have any suggestions on how to achieve this fix?

Site URL: https://www.revenyou.com.au/ Hi SP Family, We recently built our website - www.revenyou.com.au. Used version 7.1. I built the site using folders and then within the folders I added pages. I made the folders so that they would like to pages that were not linked as we don't have the indexing option anymore. Now, the issue is when you go onto mobile, those folders do not display so in essence those header menu items are not displaying on mobile. I know this is due to the fact that they are in "not linked" and I can move them back but how do I get my folders then to have information for the readers? For example About Us is the Folder - has the "why use us" and "the team" And then another page as "industry awards etc" QUESTION: How do I make my folders visible on mobile?

Site URL: https://www.descoverhome.com I am trying to create a navigation bar that sticks below the header when scrolling on both mobile and desktop. I've found a workaround that uses the announcement bar and switching the location to below the logo header, but I'd still like to use the announcement bar for actual announcements. I've attached an image. I'd like this whole section to be fixed to the top at all times to allow for easy navigation around the site. Thanks in advance for your help! pw: 123456

Site URL: https://www.haveteewilltravel.com/store-2 Hello, I am trying to remove the navigation links on a product page or shopping page. I would like to do this on individual pages, not the entire site. I found some code that was supposed to do the trick, but didn't seem to work. This is the code I tried. <style> /* REMOVE TOP SECTIONS - Header, Mobile Header, Announcement Bar */ .Header, .Mobile-bar, .sqs-announcement-bar {display:none !important;} /* REMOVE BOTTOM SECTIONS - Footer */ .Footer {display:none !important;} </style>

Site URL: https://www.giclee42.com/ squarespace 7.0 there is a lot of space between my site logo and the navigation menu. how can i close this gap?

There are several issues with member area nav- my current issue is when someone navigates back to the main site they no longer see the main site nav and the member area dropdown is only visible. I really wish members could seamlessly switch back and forth without having to log out. Is there a way?

Site URL: https://mokshatransformation.squarespace.com/ Hello there, I am using the below code to create an underline effect on my main navigation.... (site password is: Moksha) // Center Nav Line // @media all and (min-width:770px){ header nav a{ display: inline-block; float: none; } header nav a:hover:after{ transform: scaleX(1); } header nav a:after { display:block; content: ''; border-bottom: solid 1px #cda05a; padding: .4em; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999; } } It works great until you get to the page titles within a folder. The width of this underline appears wider than the wording. Is there a way for this to be corrected? Just so the underline width is the same width as per the wording. Many thanks in advance for any help.

Hey everyone, I just started using Squarespace free trial, and I am just starting with the design of my website. I am pretty happy with how the desktop site looks but not really with the mobile website. What I want to do is keep using the desktop navigation menu on mobile, because on mobile the menu becomes a hamburger, but I just want to keep the text on the website because otherwise it looks kinda empty on mobile. I added images on how I want it to be, you can see that it is just the regular menu instead of the hamburger. Thanks!

Site URL: https://zoranmilisicphotography.squarespace.com/ Hi there, I am using the momentum template to display a clients photography folio. I created a folder within the main navigation to display 'projects'. On desktop this views fine, however on mobile, the folder is automatically expanded to view all the pages within that folder. Is there a way to view just the folder 'projects' on mobile without viewing all the pages straight up? Password is : Zoran Many thanks for any help at all.

Site URL: https://walrus-bamboo-ngjt.squarespace.com/?p Hi, I am wondering if someone can help me figure out how to lower my nav bar to align with the baseline of my logo. I don't know much about coding. I've attached a screenshot of the homepage as the site isn't live. Thanks in advance!

Site URL: https://tbdwebsite.squarespace.com/ hey guys! trying to reduce the space between dropdown links in my menu. see photo attached! is there any CSS to move the items closer together?

I'd like the pagination on sub-pages to be centered between the line demarking the footer and the line I created demarking the end of the page text. Would this be adding padding to the bottom of the pagination to orient it higher in it's content box? You can see from this picture that the pagination does not appear centered between the lines (though it is centered between the sections). How would one go about making this edit? This is the website: https://gar-conch-fhlx.squarespace.com/password: larslangberg

Site URL: https://cyan-grape-y4g4.squarespace.com/ Hello! I’ve been having an issue with the top navigation links on my website, which I’ll demonstrate using the above sample site. I would like the top navigation words to function as clickable links while still acting as folders that produce a dropdown menu. So, in this example, when the user clicks the “About” link in the top navigation, they will be brought to a main “About” page, but hovering over “About” will still produce the drop down menu. I’ve found this can be partially executed using this code: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-nav-folder-title[href="/about-1"]').click(function() { window.location = "about-page-main-test"; }); }); </script> Using the above, “About” still functions as a folder, but is also clickable and leads users to my desired page. However, I have found when I implement this code, right clicking “About” in the top navigation and attempting to open its link in a new tab leads me to the wrong page. More specifically, it leads me to the first page in the “About” folder—in this example, this is the “What We Do” page. Why does this occur? Is there any way to fix it? It could be addressed by having the desired page as the first one in the folder, but I’m hoping for a separate solution that doesn’t require me to add any other pages to the folder in question. Can provide the password for the site in a message upon request! Thank you! K

Site URL: https://pte.squarespace.com/ Password: Party Hi! I am wondering if there is a way to remove the folder content for mobile and just leave the main titles in place. For example: ABOUT (remove Arrow and take me straight to the About page) I believe there are two ways to go about this: 1. Add custom code to switch the navigation links from taking you to the folder contents and straight to the page. As well as getting rid of the arrow. or 2. In the custom CSS, I initially removed the redundant menu options. For example: ABOUT > ABOUT, Team, Process, Pricing I turned off the display of .header-nav-folder-item: first-child. However, instead of hiding it, we can switch the .header-nav-folder-item: first-child with the first ABOUT option that takes you to the folder contents. The overall goal would be to bypass the nav folders and go straight to the pages for mobile devices only. Your help is greatly appreciated! -Patrick Password: Party

I'm trying to get a transparent header on Almar (V. 7.1). I only need this on one page so that I can have a black header on all of the other pages and have my logo show through on a banner image on the main page. Any help would be appreciated.

Hi, I'm trying to do something I was able to do in Squarespace 7.0. Right now I have Squarespace 7.1 and I can't do it anymore. Essentially it's putting the different pages within the folder in navigation menu inside a page (see attached). Makes it easier for people to navigate and see the different pages instead of going back to the nav bar. Is there any way I can achieve this? I'd highly appreciate the help!

Site URL: https://www.claudianuria.com/ Hello, I would like to split my header navigation so it is left and right from the centred logo. I have tried the following but when making the window smaller or bigger the navigation links on the right keep moving. Please can someone help? Thanks! Password is: 123password @media screen and (min-width:992px) { .header-nav-item:nth-child(n+4) { position: relative; left: 60vw; top: -25px; } }

Hello everyone, Can you please advise on how to force the mobile menu on a desktop? I am new to squarespace and trying to keep the hamburger menu on with all screen sizes. I'm using version 7.1 - and all online resources are based on a previous versions were you can edit mobile settings that are not available anymore. It would be great if you can suggest any tips or custom code. website: tarpon-reed-27ss.squarespace.com password: 1234 many thanks, Dario

Hello, I have spent a good amount of time digging through multiple threads/forums regarding anchor links in 7.1 sites and wanted to summarize what I have working, and what issues I am seeing. (I apologize as I am unable to share my site yet as it is not public, and also for the giant info dump, but I thought it may help others to see it all consolidated, as I am combing multiple problems) My setup: Currently I am using code inject blocks to create div tags for header site navigation anchor links. Example: <div id="about" class="anchor-offset-about"></div> Header nav links are written as follows: /home#about The class is so I can create a manual offset for both desktop and mobile jumps to display in the exact spot I want. Example: //desktop// .anchor-offset-about { position: relative; top:0px; } //mobile// @media(max-width:767px) { .anchor-offset-about { position: relative; top:100px; } } Smoothing scrolling is enabled via: html { --scroll-behavior: smooth; scroll-behavior: smooth; } Smooth scrolling on Safari specifically is enabled via: (site-wide header injection) <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script> <script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script> -- This setup IS WORKING correctly. HOWEVER, I am running into some weird glitches across different viewing formats. 1. Chrome - Everything is working properly. Aside from the random anchor link not landing exactly correctly (very rare) this all works. 2. Safari -Upon landing on the home page for the first time, every anchor link appears to force a page refresh and jump to the anchor point without smooth scrolling. After this completes, anchor links will work properly and smooth scroll between them. I am still looking for a solution to this. There are the two options I have tried without success. 1. Force the home page to load at #top. This is not a viable solution, however, as it will work on the very first page load/visit. But if I visit another page on my site that is not the home page, and try to return to one of my anchor links from the header navigation it will force a page load to the top again and not jump to the correct location. 2. Purchased squareaddons.com Anchor Links product. This will solve the problem on desktop, however, I am unable to set class specific adjustments, so anchor link jumps do not land correctly on mobile. I have submitted a ticket to them to ask about this. 3. Mobile (Safari and Chrome on iOS - both iPhone and iPad) -Similar to above, page refresh occurs on first click of any header nav link after landing on home page. Scrolling will work after this. The main other problem on mobile only is that my site header, which is both fixed and using the "dynamic" setting in Squarespace 7.1 is not loading properly when using any anchor link for the first time. It jumps to the right location, but is transparent, showing content underneath where it should be a solid color (white in my case). If I start scrolling or click the anchor link again it will display properly, but makes for a very messy first-time viewing experience. And advice or solutions to these issues would be greatly appreciated. Thank you!

Site URL: https://lobster-piccolo-c8t5.squarespace.com/business-prsentationen Hello Squarespace community, I'm having trouble changing the font color of the dropdown menu of a folder in the navigation bar. I would like to achieve 3 things: 1. Have this pink color as box color of the dropdown menu (achieved that) 2. Have the title of the folder (Für Unternehmen) in the same pink color underlined when selected 3. Have the links in the list of the dropdown menu have white font color (even when not visited or hovered) I am struggling with points 2 and 3. Could someone help me please? (the password for the site is: helloworld) Thanks in advance 🙂

Site URL: https://www.allgardening.co.uk/ Remove padding around top nav and image below in SS 7.0. I want to be able to move the hero image up, currently there is a huge white space, can't find a way to remove via site styles. Its Alex template, on Version 7. Would someone have the required code to add to the CSS? Thanks I'd also like to be able to move the nav elements so they are all on one line, responsively. Would someone have the code for that too? Thanks Loads. Phil

Site URL: http://empiricalwisdom.com Hello! I am currently using the dynamic style sticky header and some CSS I found to customize the navbar on scroll for certain pages on my site. When first loaded, the navbar is transparent with white text. Then on scroll, the navbar gets a solid white background, and the site title + navigation links change to black. However, the color of the site title and nav links seems to change to black faster than the white background appears, which looks quite clunky. Does anyone how I can achieve a matching transition animation for both the white background and the changing text color so that it looks smoother? Would really appreciate any help 🙂 Here's the CSS I'm currently using: <style> .tweak-fixed-header .shrink.header { background: #FFF !important; } .tweak-fixed-header .shrink.header .header-nav-wrapper a { color: #000 !important; } .tweak-fixed-header .shrink.header #site-title { color: #000 !important; } #header.shrink .burger-inner>div { background-color: black !important; } </style>

Site URL: https://www.callummckirdy.com/ Hi. On a customer's site they wanted to go with a really clean menu item so we've hidden all the site navigation under a single button for the main navigation. But that navigation looks rubbish on a mobile device: > Any ideas on how to remove the "Menu" when ONLY on a mobile device? Thanks for your help. B