Jump to content

Search the Community

Showing results for tags 'fixed-navigation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. Hi there I please need help with setting up a description text under an image. On the following landingpage, the small text under the image "Franziska Mulle, lic.iur., Rechtsanwältin und Mediatorin SAV" has a wrong behaviour on mobile view of ipad (portrait). I wanted to do a workaround and change it into a image description text, so it is belonging to the image. But can't figure out how. Second adjustment would be to have the logo fixed at scrolling, but the CTA button "Kontakt" not. Is there a custom code for that? https://mulle-legal.squarespace.com/ PW: SF2022 Many thanks and best Sibylle
  2. Hi, How can I make my navigation menu fixed on each page when scrolling? At the moment is only fixed on the landing page and the category are fixed and go on top of the products when scrolling. I will attached screenshot because the website has geotargtly installed and if you aren't in switzerland and you don't have a vpn you will be redirected to the .com website. At the moment the categories are fixed but not the menu. Those are the codes in use: <!-- Disappear Anno - Category on scroll --> <style> @media screen and (max-width:640px) { .sqs-announcement-bar-dropzone { position: static !important; } .ProductList-filter { position: Static !important; } } </style> <style> /* Fix mobile announcement bar */ @media screen and (max-width:767px) { .sqs-announcement-bar-dropzone { top: 83px !important; } } </style>
  3. Hi! I am working on my new website but I noticed something and I don't know how to fix it. I have a portfolio page where I feature my work in a slideshow, and it looks perfect on the desktop version. However, when I look at the page in the mobile version, there is a lot of space between my slideshow section and the sections above and below. I think it has something to do with the fact that in the desktop version the hight of the slideshow (+ slideshow images) is fixed, but in the mobile version the width is fixed and the height differs. I added two pictures of what it looks like in the mobile version. Is there maybe a way to fix this? Thanks!
  4. Site URL: https://walrus-drum-amwz.squarespace.com/config/pages On this page https://walrus-drum-amwz.squarespace.com/, my home page, I have a gallery section which i want to be fixed while scrolling the page on both desktop and mobile view. Is there a way that with code I can do that? **Please send me your email with your reply so I can share with you my site password 😄 Thanks in advance, N
  5. Site URL: https://www.salastina.org Is there a way to make the navigation bar on the landing page stay fixed at the top of the screen when scrolling down through the images? https://www.salastina.org
  6. Site URL: https://www.aeneis-paris.com Hi, I need help in making my navigation bar / menu fixed when scrolling. I tried to add the code below but didn't work. The categories in silk scarves are sticky when scrollling but with transparent background, ideally they should be fixed as the header with white background. Can someone help me out? Thank you Lisa
  7. 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?
  8. 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!
  9. 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.
  10. 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!
  11. 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
  12. 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.
  13. 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
  14. 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
  15. Site URL: https://www.nancykononelos.com/ Hi, On scroll, how can I add a 1px bottom border to my navigation bar? Thanks!
  16. 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?
  17. Site URL: https://www.thirty-square.com I'm trying to figure out how to set my header section to change from transparent to a solid colour but only when the page is scrolled. Can anyone help?
  18. Site URL: http://www.the-proof.com hello - can anyone help me keep my navigation bar and header visible when people scroll down the page please? I am using Foster template Thanks
  19. 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?
  20. 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!
  21. Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1 Hello, I have created a menu navigation within my page and I wanted to make it 'stick' on screen so that when the user scrolls further down, it stays within sight. Is this possible? Page = https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1 Pword = bluebird Many thanks, Best, Faiz
  22. 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?
  23. 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
  24. Site URL: https://oriole-cowbell-8s27.squarespace.com/ Password to access the website : sophrologie Hi, I have an issue with my mobile version. The laptop version has no display problem. On my mobile, The first page (welcome page) appears ok. But then, on each page i have a blank space between the navigation bar and my content (or image with the yellow line). I would like to reduce those blanks but i don't know how to do it. I have added thanks to tutorials those things in order to have a fix navigation bar, and that reduce when i scroll down, and parameters for my mobile. In CSS: .Header.Header--top { position: fixed; top: 0px; z-index:1000; width:98.6%; box-shadow: 0px 2px 3px rgba(0,0,0,0.1) } .Intro {padding-top:100px;} .Index {padding-top:150px;} .Main {padding-top:100px;} .Main.Main--page {padding-top:100px !important;} .Main.Main--blog-item {padding-top:100px !important;} @media only screen and (max-width: 480px) { .Main {padding-top:0px !important;} .Main.Main--page {padding-top:0px !important;} .Intro {padding-top:0px !important;} .Index {padding-top:0px !important;} } In advanced parameters (code injection), header : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).on('scroll', function() { if ($(document).scrollTop() >= 1) { $('.Header-inner').css('padding-top', '1px').css('padding-bottom', '1px').css('transition', '0.3s'); } else { $('.Header-inner').css('padding-top', '').css('padding-bottom', '').css('transition', '0.3s'); } }); $(document).on('scroll', function() { if ($(document).scrollTop() >= 1) { $('.Header-branding-logo').css('width', '105px').css('transition', '0.3s'); } else { $('.Header-branding-logo').css('width', '').css('transition', '0.3s'); } }); $(document).on('scroll', function() { if ($(document).scrollTop() >= 1) { $('.Index').css('padding-top', '60px').css('transition', '0.3s'); } else { $('.Index').css('padding-top', '').css('transition', '0.3s'); } }); </script> If you can help me thanks a lot !!!!!
  25. 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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.