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

Search the Community

Showing results for tags 'sticky header'.

More search options

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


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Found 4 results

  1. Site URL: http://www.brandyglows.com Hello, friends! I'm on 7.0 using the Brine template. I am helping my wife with some custom CSS for the navigation menu on her SquareSpace site. I've implemented a caret-style dropdown menu, and I have figured out the styles for a sticky header. Here's the problem. In order to get the mega menu working, I first styled the dropdown section using `position: fixed` as follows: /* Style mega menu */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder { outline: 1px solid purple visibility: hidden; margin: 0; height: auto; width: 100vw; position: fixed; top: 9.5rem; left: 0; letter-spacing: 0; line-height: 1.5rem; box-shadow: inset .05rem .05rem .15rem .015rem rgba(0, 0, 0, 0.075); } /* Reveal mega menu on hover */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder { visibility: visible; } Note about the below property: I used this strictly for diagnostic purposes. `outline: 1px solid purple` Here is the styling on the navbar: /* Sticky header */ .Header.Header--bottom { position: sticky; position: -webkit-sticky; top: 0; height: 3.5rem !important; z-index: 999 !important; background-color: #FFF; box-shadow: 0 0 .1rem .05rem rgba(0, 0, 0, 0.15); } The dropdown worked well before the navbar was `sticky`, but now it is out of position when the user scrolls down, which makes sense. Where the real headache comes in is when I tried to change it to `position: absolute` in an effort to keep it close to the navbar. When I do this, the element scales on resize, and rather than remain full width, it leaves a gap on one side despite setting `width: 100vw`. I know this is probably a noob thing, but I am racking my brain to figure out what to do. Site — http://www.brandyglows.com Password — 'temp' If anyone could have a look and offer a tip, I would be hugely grateful.
  2. Site URL: http://www.elizabeth-curtis.com/overview Hello everyone I have a sticky header that changes from transparent to a neutral colour perfectly, however I was wondering if it is possible for the text to change from white to black on scroll as the background colour appears? www.elizabeth-curtis.com/overview The code I am using is // FIXED HEADER CHANGE COLOUR // .Header{ background-color: transparent important; position: fixed!important; transition: 0.1s all linear; -webkit-transition:background-color .4s; -moz-transition:background-color .4s; transition:background-color .4s; } .on-scroll{ background-color: #f6f3ef!important; } .Site-inner{padding-top: 0px;} Thank you so much for your help.
  3. Hi there! I've put a Sticky header into a site built on York, and it works perfectly on the index pages, but on the Contact, About and Press pages, there's a big gap above the Nav Bar. I want the coloured Nav bar to remain glued to the top of the screen as it is on the Index Page. What's wrong with this code? It's bits I've grabbed offline and put into the custom CSS section. I don't know how to code so it's total guesswork and any help would be hugely appreciated. I've attached a screengrab of the index, where the navbar sits at the very top of the screen how I want, and the about, which has the horrid gap. #header { position:fixed; z-index: 1; background-color: #402C30; padding-top: 13px; width: 100%; padding-bottom: 13px; margin-top: 0px; } @media only screen and (min-width: 760px) { .site-page { padding-top: 40px !important; } }
  4. Hi folks! Can anyone tell me how to make my menu and header stick on the Wexely template? How can I insert a "top of page" button? Thank you!
  • Create New...