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



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

Found 39 results

  1. 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 !!!!!
  2. Site URL: https://runatitshouting.co.uk/allevents?category=WORKSHOPS Please can someone let me know how I can remove the "Filtering by: Workshops"
  3. 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
  4. Site URL: http://www.elbuhololava.com Hi! As you can see in the last child of the NAV the scroll down option is shorter than the upper "button", how to i make a longer background for the drop down list to match the upper section.
  5. 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
  6. Site URL: https://www.biocleandd.com I have a fixed header (Brine Template) that looks great everywhere - except on Internet Explorer (my client is amoung the 4 people in the world that still use that). The header covers the top of each page. Anyone have a work around, settings or code fix?
  7. Site URL: https://fife-deer-hznw.squarespace.com/ Hi. I have added a fixed header nav, and now I'd like to get the announcement bar to sit just above the header. Right now the announcement bar is overlapping with the header nav. Here's what is in my CSS... what am I doing wrong? .Header.Header--top { position: fixed; top: 0px; z-index:1000; width:100%; -webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49); -moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49); box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49); } main{ padding-top: 200px; } ajax{ z-index: 9999; } @media only screen and (max-width: 1000px){ main { padding-top: 0px; } } @media screen and (max-width:828px) { .sqs-announcement-bar-dropzone p { font-size: 15px; letter-spacing: .7px; line-height: 180%; } } .sqs-announcement-bar-dropzone { position: -webkit-sticky; position: sticky; top: 0; z-index: 10001; } .show-on-scroll-wrapper.show { display: none; }
  8. Site URL: https://www.wethewell.co Hi, I am currently on the Bedford Template. I have implemented the following code to allow the transparent fixed header at a larger height, but I am needing to have my fixed header turn white or background color when I scroll past the banner. How can I do this? (Site password: scocreativeclient) Current Code in Custom CSS- header#header { position: fixed !important;} #logoImage img { height: 125px !important; max-height: 100%; } .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 100px 0 200px; }
  9. 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
  10. 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
  11. Site URL: https://www.dtr.media/ Hello, I'm in the process of building my site and currently have a fixed header with transparency applied to my home page. I'm a CSS novice at best and mainly found the code to modify those elements by searching and piecing some things together. The fixed/transparent header have automatically been applied to the contact/about pages, but the video & photo gallery pages aren't applying the changes for some reason. How would I go about correcting this so the nav bar is consistent across all pages? Thanks for any help. Current code being used:
  12. Site URL: http://www.tambourine-caribou-p5bh.squarespace.com Hi, I wonder the custom CCS I can use to have a fixed header for Basil template. Thanks.
  13. I'ld love to find some code to place on my site on the non-front page of a pacific site so that the navigation bar is fixed at the top even as you scroll down
  14. Site URL: http://www.cube-wombat-7thw.squarespace.com Hi, I would love some help please if anyone knows how to move and match up my Main navigation buttons at the top of the page to look the same as the larger navigation buttons on the bottom of the page as per pics attached. They're in different orders and 'About' is missing Many thanks@!
  15. I am using the Rally template on 7.0. On the "site styles", I can customize my image card blocks so that the image width is 50% of the entire block. Using custom css in the design tab, is there any way I can customize the image width on every individual image block so that they don't all look the same? For example, have a block with image width 30% and another block at image width 50%. Also, how do I customize my header so that it is fixed, transparent at first, and turns white on scroll with a transition? I've tried using simple css codes and they don't seem to work, but I've seen other sites with the Rally template do it.
  16. I'm using the Jasper template and I want to keep the menu bar at the top of the screen as I scroll down like this website https://www.etudes-studio.com/. I've tried a lot of CSS codes I've found online but didn't work. Any help would be amazing!
  17. Site URL: https://duck-buffalo-k3d3.squarespace.com Hello! I'm attempting to keep the header Constant and Fixed as I scroll through the pages. As of now it is fixed but not constant - as in it changes colors based on each page when it scrolls down I would like the header to keep the metal look when scrolling rather than changing to green. Here is the Current Code. Appreciate any help! //Header Image .header { background-image: url("https://static1.squarespace.com/static/5e8ca6472e5c376d3f69a514/t/5e9e0633a2713368e9c28d3f/1587414595997/TIB+-+Metal+Header+Texture+-+v1.png") } //Header formatting @media screen and (max-width: 700px) { .sqs-block-horizontalrule {max-width: 100%} .sqs-block-content hr { margin-top: -33px !important; margin-bottom: -33px !important; } .Main-content { margin-top: -20px !important; margin-bottom: -82px !important; } .sqs-block-html {margin-top: -40px; padding-bottom: 0px; } }
  18. I want to build a header in which my logo is at the top center, flanked by two navigation links to the right and two to the left. How can I modify the header format to make this possible. Here is a screen cap of the desired result, from my previous WordPress site.
  19. Site URL: http://servantsforhope.com how to lock navigation in place so remains on page when scrolling down in mentor template squarespace
  20. Site URL: https://gopher-mackerel-pen5.squarespace.com/ Hello SS brains trust, Fixing up a few things on a clients site built by another designer and need some help with nav for mobile & tablet... Nav menu is fixed and working perfectly on homepage, though when I navigate to the Team and Contact pages, it's not visible at all. Any ideas how to fix this? It is already using custom CSS for the mobile nav, but I don't have the technical knowledge to figure it out myself. site is: https://gopher-mackerel-pen5.squarespace.com/ pw: HIP2020! Appreciate your help in advance. Muchas gracias. RAD.
  21. 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
  22. Site URL: https://goose-magnolia-r53a.squarespace.com/config/settings/site-visibility Hi there the password to my site is Orlabea16. I am trying to add padding or a margin to the top of the nav so its further down the page - but am happy with the current width of the shrinked nav. Any code i try affects both. Also, how do i change the font styling on the nav? thanks jane
  23. Hi, I have been able following some posts around here to get the fixed header tweak I wanted. My last problem is that the code is working everywhere but not in one page when scrolling the video gallery content is sliding above the menu despite of under. How could I fix it ? Any help appreciated Best Edit: This problem seems to occur only with galleries using the slideshow design, photos or videos. Code used: /* Fixed Header */ #header { position:fixed; z-index: 1; background-color: hsla(0, 0%, 7%, 0.9); -webkit-backdrop-filter:blur(10px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Safari 9+ */ backdrop-filter: blur(10px); /* Chrome and Opera */ padding-top: 30px; width: 100%; padding-bottom: 30px; margin-top: -30px; } @media only screen and (min-width: 760px) { .site-page { padding-top: 170px !important; }
  24. I just can't seem to make this work! All I am trying to do is make the whole header area (Announcement Bar + Header (Logo, Navigation, Shopping Cart, etc.) stay visible at the top of each page. HELP Site is www.justgoodjuju.com
  25. Hello, I am trying to rebuild my site and want to use the York template. I see there is no design option to freeze/keep the navigation menu at the top, which I would like to do. A Squarespace rep suggested this could be done with code, but I have no idea how to implement that. Any advice would be appreciated. Thank you.
×
×
  • Create New...