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

Search the Community

Showing results for tags 'sticky'.



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 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

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


Badges


Expert ID

Found 25 results

  1. Hi, I would be very grateful if anyone knows if this can be done? 7.1. I'm using a multi-page template (Alma) but the main page has Jump To navigation links at the top in a narrow horizontal strip. It's a long page for visitors who are time poor attending an event. For this page only, I would like to make it sticky at the top of the screen, so that when people scroll down, they can jump to areas easily. Any advice would be appreciated. Thank you.
  2. Site URL: https://www.crescentridgedairybar.com/products I have a div named .fixedelement with position: sticky; top: 0; on an index page Here is the code block code i'm using: <style> .fixedelement { position: sticky; top: 00px; width:100%; margin: 0px; background-color: white; padding: 5px; min-width: 300px; overflow: visible; position: -webkit-sticky; } </style> <div class="fixedelement"> <a href="#milk"><button style=" width: 23%;white-space: nowrap; font-size: 18px; font-family: arial;overflow: visible; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; appearance: none; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px; align: center;"> <b>Milk </b> </button></a> <a href="#icecream"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal;overflow: visible; padding: 10px; min-width: 100px;margin-bottom: 10px;"> <b>Ice Cream </b> </button></a> <a href="#beefandpork"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; overflow: visible; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;"> <b>Beef & Pork </b> </button></a> <a href="#Novelties"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;overflow: visible; "> <b>Novelties </b> </button></a> </div>
  3. Site URL: https://www.thedesignconference.com.au/best-agency-application Hey there gang. Im trying to use the SQSP code component to create a website section featuring two 50% wide columns. The left column features a h2 header, with the right column featuring four paragraphs of text. My goal is to use 'position: sticky' on the h2 header in the left column, to pin the h2 to the top of the browser while the user scroll through the section. — — — — — — — — — — — My CSS — — — — — — — — — — — .orb-questions-wrapper { display: flex; background-color: #FFF; overflow: visible; float: left !important; } .orb-questions-left-column { position: -webkit-sticky !important; position: sticky !important; top: 0px !important; width: 50% !important; float: left !important; } .orb-questions-right-column { width: 50% !important; float: right !important; } — — — — — — — — — — — My HTML — — — — — — — — — — — <div class="orb-questions-wrapper"> <div class="orb-questions-left-column"> <h2>Heading</h2> </div> <div class="orb-questions-right-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis congue ipsum. Mauris eu sapien in tortor ullamcorper fermentum. Pellentesque id pretium ante, ut consectetur odio. Sed at orci neque. Nullam quis facilisis ipsum. Donec eleifend lectus feugiat ante pharetra viverra. Phasellus cursus lacus vel gravida porta. Fusce rhoncus, nisl eu commodo ornare, lectus ex condimentum tortor, eleifend tristique nunc dolor in nisi. Fusce consequat volutpat massa aliquam dictum. Nulla in luctus risus, mattis laoreet lorem. Nullam at nisi venenatis, eleifend leo et, finibus diam. Donec id ligula condimentum, consectetur urna eget, faucibus neque. Ut nec commodo odio, et tempor quam. Proin at tempus odio, a egestas augue. Integer eu consectetur est, vel vestibulum quam.</p> <p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p> <p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p> <p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p> </div> </div> — — — — — — — — — — — I know I am missing something simple. Please help. Thanks in advance — Matt TDC
  4. Hey there, I have a bit of a tricky problem! For a client site, I'll be needing to create a full-width newsletter signup bar with a background color at the bottom of the web browser that remains visible ALL THE TIME, on top of the page content during scroll - about 100px in height, so that people can see it on every page. See example here - this is a wordpress site, but exactly what my client wants for that bottom-of-page always-on-top newsletter call to action: https://pippagrant.com/ For the life of me, I cannot figure out what to do with code to create this functionality! 😅 I know how to create a sticky header, but when it comes to always-visible bottom blocks, I have no clue how to set that up. Any help or direction would be so appreciated, thank you!!
  5. Site URL: https://caribou-brass-k4nh.squarespace.com/config/settings Hi, wondering if anyone can help with some code. I would like this text box on the left to be sticky. This is a very long page and easier if this was always visible. It is the only page that features this list. Hi, I am wondering if anyone can help
  6. I'd like to add a sticky sidebar with anchor link navigation to one of the pages on my site, exactly like the "Navigate This Post" sidebar on this site: https://thirtyeightvisuals.com/blog/free-squarespace-plugins-meet-ghost#mgfsp-anchor-08 What's the best way to go about adding this?
  7. Site URL: https://dinosaur-fennel-sh5w.squarespace.com/ Does anyone know CSS that can make the top "section" of a page fixed for specific pages? I am essentially trying to create a secondary navigation on an individual page, but have that section / secondary nav fixed when scrolling. Below is a link to the page I'm trying to do it on. I would like the dates fixed (2020, 2019 etc) https://dinosaur-fennel-sh5w.squarespace.com/paintings-2007-2015-1 Password: 2020 Thank you!
  8. Site URL: https://www.marlonbunday.co.uk Hi, I am working on a portfolio site using HAYDEN template but the sticky navigation header bar doesn't work on all pages, in particular pages contained within a folder structure, as on this URL: https://www.marlonbunday.co.uk/all-work It works on index pages (https://www.marlonbunday.co.uk/about) but I have no idea how to "force" it to appear on ALL pages. Any ideas or workarounds welcome 🙂 Thanks, stay safe out there... Marlon
  9. Skye has a fixed, or sticky, header. It can't be disabled in Styles, so to have the header move with the rest of the page, I have to do something in CSS. I tried the following code - While this did solve the problem, it made mobile view a mess. Before the changed code, my site on mobile did not stick to the top and so it wasn't a problem. With this added code, it disables most of the header, leaving only the logo that sits on top of other content. Is there a way I can implement this code to only the desktop view so it doesn't affect mobile? Thanks, -Lisa
  10. 1) How can I create this 'line / frame' in css? I know how to create a horizontal line and two vertical one, but i cant't stitch those together to recreate the graphic. 2 how can i make this sticky on top of the page? So it hangs above the primary navigation. ( and make it sticky on every page when scrolling?
  11. Site URL: https://www.socialive.us/bcg-case-study Hi all on this page (password ccs) there is an informational box. When you scroll past the hero image i would like that box to stay fixed to the top as you continue to read the other information. I cannot, for the life of me, figure it out. Here are two other pages that have the function I'm looking for https://thirtyeightvisuals.com/blog/resources https://slack.com/customer-stories/zendesk
  12. Hi, I was just wondering if anyone knows if it is possible to fix the footer to the bottom of the visible section of the page, for all pages. To clarify, I'm looking to have the footer behave just as the header does when you have it set to fixed position in the header style editor i.e. a fixed position on the page when scrolling. Hope this makes sense! Any help with this would be much appreciated. Many thanks John
  13. Site URL: http://collaborativeperformance.org Hi fellow Squarespace users 🙂 On our website we are currently using sticky navigation, so the navigation follows when scrolling on our page. I would really like to change that to a normal navigation that goes away when scrolling down, BUT that appears again when you, anywhere on the site, scroll back up just a tiny bit (not scroll all the way to the top). Unfortunately I haven't been able to google my way to a solution Does anyone know how to accomplish this? :-)
  14. Site URL: https://bisourouen.squarespace.com/ Website Password: lachose hey there, I would like to know how to add a sticky menu to the Basil template with CSS/PHP Could you help me?
  15. Site URL: https://iamabbytaylor.com/ Hi there! I'd like to add a png element that is sticky in the bottom right corner of the screen at all times on desktop and tablet. For an example, I love how that happens with the & sign on this site: https://sagmeisterwalsh.com/ and want to achieve a similar effect on my site. It's also how pretty awesome how the & sign in the bottom right corner is only visible when you're scrolling, but no problem if that's not doable! Thanks so much, Abby
  16. Site URL: https://bison-oleander-3srg.squarespace.com/config/design/styles I can't believe that there is no option to make the folder sidebar navigation sticky. So the navigation just scrolls away out of the screen? this is a strange attribute to have I believe. Also please take into account I'm not the coding type but do know how to copy and paste some CSS into my page if this is needed.
  17. Site URL: https://www.gefahrgutakademie.at Hi, is it possible to have my header be sticky on all but one or two pages? I'm trying to set up a gallery (https://www.gefahrgutakademie.at/elearning-beentladecheck) but I either have to get my header out of the way or compromise on the size of the gallery which I rather wouldn't do. I'd be grateful for any suggestions or help. Thanks in advance!
  18. Site URL: https://justgoodjuju.com/bracelets On the page (https://justgoodjuju.com/bracelets) we have a filter list (using Categories) that is presented on the Left Hand side. When there are a lot of products (select All) and you scroll down, the filter list does stick but it does not stick at the top (i.e. the topmost category showing is Accent - Gold when I would like it to be the All). I just can't seem to latch onto what I need in order to make it stick 'higher' in the list. I had thought that by altering 'top' I could achieve it (as I assumed top indicates the point at which the container reaches when it sticks) but when I make 'top' any value other than 0, the list is no longer sticky! The CSS achieving the stickiness is: /* FILTER ON PRODUCT PAGES */ .ProductList-filter { position: -webkit-sticky; position: sticky; top: 0; } Any help would be very much appreciated.
  19. Site URL: https://pelican-chiton-xwy4.squarespace.com/shop/fos-classic Hello, I'd like my header / top nav to remain sticky on scroll only for my Product pages (this page #item-5dfb3eba5179d73d7b6fa175 for example). Is there an easy way to do that using custom CSS? thanks
  20. How do I apply sticky navigation bar in Impact template?
  21. Hello, looking for a code to fix the header on my site www.BettyBoujee.com My header is transparent visible when you first log into the homepage and when you scroll down it becomes visible with a white background. Wanted to essentially hide the header when you first log into the homepage then when you scroll down it becomes visible and "sticks". Hopefully I explained it okay and it makes sense. An example of how I want it to be like http://www.cocktailcar.co.il/
  22. Hi there, I'm working on a website in developer mode. I used the 'sticky' property in order to make every page of the website stick to the top when scrolling. The problem I'm having is that when I scroll down the pages stick to the bottom on top of each other: when then I select any page from the nav bar it doesn't redirect me anywhere. Website: https://vib-strategy.squarespace.com/ Password: maggie-vib I hope this makes sense, thanks in advance for your help!
  23. FIVE Template: For the life of me, I can't get any of the suggested code to work for sticky top nav (Five). I've handled it just fine in Bedford, but no luck here. Can someone using Five list injection and CSS that's worked?
  24. I'm looking for some code that will make my navigation bar sticky. My site is: http://www.monstersoftherunway.com. It uses the FIVE template. The few suggestions in the forum don't seem to work for my template. Either the navigation bar stops being centered or the text scrolls over the nav bar and looks really messy. Thanks!
×
×
  • Create New...