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

Search the Community

Showing results for tags 'fixed header'.



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

Found 10 results

  1. Site URL: https://chihuahua-mayflower-6zj5.squarespace.com/ Hi, I made my announcement bar fixed with my header, however now I'm unable to click through to the page that's linked to the announcement bar. Would appreciate any help/advice! The code I'm using right now: .Header { position: fixed!important; z-index: 1000; width: 100%; padding-top: 30px; padding-bottom: 30px; background-color: rgba(255,255,255,0)!important; } @media screen and (min-width: 641px) { .Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main { padding-top: 35px; } .Intro + .Main { padding-top: 0px; } } .sqs-announcement-bar-dropzone { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } PW is: rsp123 Thanks!
  2. Site URL: https://www.casegoods.in/ Hi everyone, password of the webitse : CaseGoods_C3 Template : Brine I would like to make a header that has these properties : - landing page, first full screen gallery page > fixed header with transparent background - landing page, rest of the page bellow this gallery > same fixed header but change automatically into a coloured background so that the logo and menu stay visible on top of the content. - any other page > same fixed header with a coloured background so that the logo & menu stay visible on top of the content. I've tried as many things I could find with videos, blogs and forums tutoriels and custom codes but not able to achieve it so far. I see 3 ways of starting trying : put logo & menu into "Header:Layout, top position" and give a colour to my header background, then I "just" have to make it fixed and to make it transparent on the landing first gallery. put logo & menu into "Header:Layout, bottom position" so it's already on transparent background, then I "just" have to make it fixed and to add a background colour everywhere else than on the gallery. Or maybe it's something totally different 🙂 https://www.joshuakissi.com/ On this website, on the landing page, the header goes from white text to black text when you scroll down, so there must be a way for my header to go from transparent background to coloured background on that same page right? Also right now I'm using custom code for to make the menu fixed, it's working but it seems to create a bug : my first gallery on the landing page is set on 100hv to always take 100% of the screen space but because of this code, it doesn't. Not sure why. I'm using a faded background colour for now but eventually will change it for another colour, no worries about that. /* Fixed Menu */ .Header { position: fixed !important; left: 0; right: 0; top: 0; z-index: 999; background-color: rgba(0,255,0,0.3)!important; } @media screen and (min-width: 1080px) { .Main--page, .Intro, .Main { padding-top: 120px; } .Intro + .Main { padding-top: 0px; } } Hoping someone will be able to find me thanks !
  3. Hey everyone! In 7.1, how would you set the header to a "Fixed position", on only one specific page? I.e., on all other pages it should disappear when you start to scroll. I've searched high and low and it appears that no one has addressed this issue yet. Any help would be greatly appreciated! Pierre
  4. Site URL: http://www.thesunflowerfarm.ca Hello, I'm trying to change the background color of the fixed header to white only when scrolling. Would like to keep it set to transparent but when I scroll it turns black and text is black instead of white. Would like to keep text black but change scrolling background to white. Using Version 7.1 - is this hidden somewhere in Design - Colors or custom CSS? Please help! Thanks!
  5. Site URL: https://duck-buffalo-k3d3.squarespace.com Hello! I'm attempting to keep the header the same color when I scroll. 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; } }
  6. Site URL: https://www.marcelkimble.com/ Hi, I used a css code to install a fixed header for my Wells template. Unfortunately the header overlaps my page when you use a mobile device to visit the page. My code: @media screen and (max-width:640px) { div#headerWrapper { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; background: white; background-repeat: no-repeat; background-size: contain; background-position: center center; width: 30px; height: 80px; display: inline-block; visibility: visible; } div#mobileNav { margin-top: 110px; } } @media screen and (max-width:640px) { #mobileNav { background: #a3a3a3; position: fixed; top: 5px; left: 0; right: 0; z-index: 999; } } Thanks in advance!
  7. 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!
  8. Site URL: https://www.kowalacreative.com Hello everyone, I'm looking for a solution to my problem. My website is www.kowalacreative.com and currently I have a non-static header. I'm trying to create a header/nav bar that will hide when the user scrolls down, but re-appear when they scroll back up (on desktop and mobile). Does anyone have a solid solution to this issue?
  9. 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
  10. Hi, Currently I have the following code in custom css for a sticky header: #header { background-color: #000000 !important; position: -webkit-sticky !important; position: fixed!important; } I need a colour underneath the nav bar so it will stand out against the information on the page, the code is doing so. However, I would like this shape to span the entire page as currently it's only covering the header. Also I would like for the edges of that shape to be blurred so it won't be a harsh line across my page. I'll link to my website 🙂 Thanks, Gerry. https://www.forgetmenot-project.com/research
×
×
  • Create New...