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

Search the Community

Showing results for tags 'fixed-navigation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://chateauorlando.com/ Hi everyone! Curios to see if anyone on here knows how to achieve a similar fixed border to the one on this site . I've been able to figure out how to get the general shape but it still wraps around my entire site. Thanks!
  2. Site URL: https://norayang-design.squarespace.com/architecture-nora/tuvalu-airport Hi, I want to make the left side text fixed when I scroll down, but I don't know how to write the code, thank you so much if you could help me with this.
  3. 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
  4. Site URL: http://plenitudpr.org Hi there, I would like one button from our navigation and our logo to remain fixed at the top of the screen when you scroll on the site. A perfect example of this is in charitywater.org. This is the nav for their website before scrolling: This is the nav once you begin scrolling: I would like to be able to do that with our site as well and also with our donate button. Thank you!
  5. Hi All, I have tried to find an answer to this, but haven't had any luck. I am using Riley template and wanted to have a fixed navigation. However, I have entered numerous CSS options and the navigation bar either jumps above my logo or adds my logo to the full fixed navigation. Maybe my layout is making it more difficult? Hoping someone can help. I have added a couple photos - 1. How it is regularly, 2. Once I add the CSS (navigation moves on top of logo and whole block is fixed) and 3. The primary navigation bar that I'm looking to be the only fixed part.
  6. Site URL: http://capybera-point-sp57.squarespace.com Hey there! I was wondering if there's a way to have a transparent fixed header that switches the font color when scrolling. I'm not sure if that makes sense. So right now my header is in dynamic mode and I have the font color as a white because I like the way it looks on the colors of the moving background. However, I want to add a fixed scrolling header and an issue comes into play when I scroll down. Lower down the background of my site is white, so you aren't able to see the text in the header. Is there a way to have the text be white while at the top of the page, and then change to black or another more visible color when you scroll down?
  7. Hi I am trying to find a way to do a fixed header (navigation, logo, cart) while scrolling down. I want to keep the background transparent as it is on the website now. Please let me know if there is a way to do that with CSS. Website link https://www.szabosihag.com Thank you
  8. Hi! Is there any way to fix the header and navigation bar always on top of the screen as I scroll down my main page? It is currently on top of my site and disappears as soon as I scroll down. I'm using Foster template and my site is: davidzamorano.tv Any suggestion would be appreciated. Thanks, David
  9. Site URL: https://www.bmessinamyportfolio.com/ Hello, and thank you for reading! I just switched over to Squarespace from another more simple site builder for my portfolio. I did this because I wanted to use custom animations and things the other provider would not allow. That being said, I am only weeks old to coding- and have very limited understanding. I've used code injections to spice things up here and there, but this particular issue evades fixing. I created my portfolio on a macbook. Everything looked great, mobile had a few issues in here and there with layout resizing I could live with- but I thought I was finished. I published everything, and had someone check it out. They have a large desktop computer. As soon as I saw them go to the landing page, everything was resized terribly. The background pic behind the text is enormous, and all the text looks much smaller. Notice how the landing page looks more cohesive and purposeful than the larger desktop form in the examples. I am not a fan of this resizing, does anyone have a fix?
  10. Site URL: https://lifelab.world/ Hi Squarespace experts, I have been trying to make the main nav bar to be sticky as I scroll through the website however I also have a language switcher. I am trying to add the language switcher on the code but I cannot seem to make it work. I also wanted this to work on mobile. 🙂 This is the main code that I also found here on the forum: .Header.Header--top { position: sticky; position: -webkit-sticky; top: 0px; z-index: 1000; width: 100%; } Here is the code I am trying to add: .Header.language { position: sticky; position: -webkit-sticky; top: 0px; z-index: 1000; width: 100%; } or .language { position: sticky; position: -webkit-sticky; top: 0px; z-index: 1000; width: 100%; } It doesn't seem to work the navigation bar does not follow along. I know I am almost there I am just having a hard time finding the right code. Thank you in advance for your help.
  11. Site URL: https://amal-testsite.squarespace.com Hi all In Squarespace 7.1, there is already build in options to choice both “fixed position” and “transparent” in EDIT SITE HEADER. BUT, it doesn’t work. When header is fixed, then transparency doesn’t work. Instead Is has default or choosen background color. so how do I set or code to get transparent header/navigation menu when it’s also fixed? test site: https://amal-testsite.squarespace.com password is: abcabc
  12. Site URL: https://www.miguelezcreative.com Hello Community, I'm finishing my creative portfolio: https://www.miguelezcreative.com Currently it's password protected. Pass is: saymyname On the about section I'd like to show a photo of me on the left side and text on the right side. I'm looking to add CSS code to achieve two things: - Full height image without top and left padding. Meaning: the image just as if it were the background of this section. - Sticky position of the image (important, only for desktop navigation) with scrollable text on the right side. Right now the about section has a placeholder photo of me with top padding (with header) and left padding (with the margin) and, as I haven't added CSS yet, it's not sticky. Hopefully someone has had a similar issue and can give me a hand 🙂 Cheers!
  13. Site URL: http://www.monkeyonstrike.com SOLVED. See solution below. On my site, I have a store setup with a design I like. The text is white on gray but for some reason the description of my items in the store is black. I can't seem to find CSS online that would change this to white. Would you happen to know how I could do this? Here is a link to a picture of the offending text:
  14. I think I need fresh eyes, can anyone explain what isn't working with my css? I have fixed buttons on the sides of my pages. I had them working on desktop and mobile, but tablet wasn't showing up because I had messed around with it too much I think. so started over using the side that worked perfect and got it to show up on tablet but now on desktop and tablet one button is not fully to the edge, mobile is fine. Previous code that some how worked on desktop ( was full width, worked on desktop and mobile wouldn't show up on tablet) New code that works on mobile, desktop and tablet but now doesn't sit flush to the edge on desktop and tablet.. see screenshot for where its sitting, I cant seem to move it over any further then that on both desktop and tablet? site is : https://flugelhorn-seahorse-lzrb.squarespace.com/?p pw: design123 buttons are on the portfolio pages any suggestions is much appreciated
  15. Site URL: https://hairdiagnostics.com/medical-conditions/ The website I've linked is my present website - not squarespace made. I'm a newbie and I'm redesigning that original site. I'm trying to replicate one of the features and struggling to see how on squarespace. On the page linked there is an alphabetical index of medical conditions on the right so you can quickly jump to different conditions. It stays fixed as you go down the page. Is this, or something similar, possible on squarespace?
  16. Site URL: https://www.cutnfill.com/ Hello, I am trying to test out a fixed site header on my website but I do not know the custom CSS or method of implementing one. Any thoughts?
  17. Site URL: https://www.nancykononelos.com/ Hi, On scroll, how can I add a 1px bottom border to my navigation bar? Thanks!
  18. Site URL: https://www.pagliaccifilm.com/bio Hello! I'm having problems with my active links in my fixed nav. It's not staying active on the page once it scrolls to the fixed page. Below is the code. (I bolded the line) PW for site: divodavid2021 .Header { position: fixed!important; z-index: 1000; width: 100%; } .Header-inner { padding-top: 50px; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .Header.scrollNav { background: #fff!important; padding-bottom: 10px; .Header-inner { padding-top: 10px!important; } .Header-branding { color: #000; } .Header-nav a { color: #000!important; &:hover { color: #db9271!important; } &:active { color: #db9271!important; } } } THANK YOU!
  19. Site URL: https://www.johnsongillies.co.uk/ Hi there, I am currently running the Bedford template with an injected code to keep the header fixed. The code is as follows: header { position: fixed !important; width: 100% !important; } Unfortunately regardless of this code being used or not, I am having issues with mobile view, specifically mobile view when using the navigation menu from the homepage. The menu will pop out when clicked and will show the tail end of this script: .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper{ padding: 180px 0 155px; } This only occurs on the homepage and the site works perfectly fine elsewhere. I have tried removing any CSS code as well as changing the template to a different one and back to Bedford, however this has made no effect. If someone could take a look for me that would be hugely appreciated! Kind regards, George
  20. Hi I'm designing a website and have noticed that my navigation bar becomes distorted depending on the size of the screen and also when the window is minimized. I've attached to images below. Is there any way to code it to be fixed or to move to always be aligned no matter what kind of screen it's viewed on? What it looks like normally: And what it looks like on a smaller screen or minimized: Thanks in advance!! 🙂
  21. site: tonetension.com password: erikwiss template: unknown? how do I know? Question: how do I make the header fixed?
  22. My navigation scrolls of the screen on all of my pages. Is there something that I can do to make it stick at the top? Thanks! David
  23. Site URL: https://flamingo-comunicacion.squarespace.com Password to view site: flamingo1234 Hello everyone, On September 2018 I was developing a website and needed Hello everyone, On September 2018 I was developing a website and needed to add a fixed button in the lower right corner, so I asked this same question. But the item doesn´t exist anymore and Now I don´t now what I`m doing wrong. So, DMK was very kind and posted these answer: If you have a Code Block in the footer and give it an ID, this should give you something similar: #yourIdHere { position: fixed; bottom: 11px; right: 11px; z-index: 20000; background-color: #222; border-radius: 30px; height: 52px; white-space: nowrap; text-align: left !important; border-radius: 0px; height: 70px; } So, I make a code block at the footer and give it an ID just like these: <div id="idiomas"> </div> And then went to: SETTINGS-ADVANCED-CODE INYECTION-FOOTER And put in the footer code section these: #idiomas { position: fixed; bottom: 11px; right: 11px; z-index: 20000; background-color: #222; border-radius: 30px; height: 52px; white-space: nowrap; text-align: left !important; border-radius: 0px; height: 70px; } The result is that the code appears in the footer, and there is no button fixed. I am sure I am making something wrong. Does someone can help me please? I actually need to put to button for linking to the languages. Does someone now what is the correct code? Thank you all so much
  24. Site URL: https://cranio-fm.ch/ Hello there! I have this two language site. I created the menu with folders instead of putting the pages in the main navigation. The reason is that I don't want the two languages showing up in the top menu section. You can now see the different pages which are in the folder appearing on the left side of the page which is good. When scrolling up or down however, the folder moves with the page instead of staying in place. Is there a possibility to fix the navigation folder by injecting additional code? Thx! F
  • Create New...