AWC914 Posted October 24, 2019 Share Posted October 24, 2019 I'm using the Mentor template and want to keep the menu bar at the top of the screen as I scroll down. I've tried a variety of CSS codes I've found online but can't get any to work. Any help would be amazing! Link to comment
brandon Posted October 24, 2019 Share Posted October 24, 2019 Hi @AWC914 It's relatively easy to get the header to "stick" to the top using position:fixed or position:sticky (for modern browsers only). Something like this usually starts to get the effect: .Header { position: fixed !important; background-color: #DDDDDD; } However, depending on your configuration, they may only get you part-way. Furthermore, you may find additional complexities appear regarding top/bottom headers, announcement bar (in use, closed, open), whether you want it fixed on both desktop and mobile, whether you're okay with the nav. overlapping content (especially when on-page anchor links are used) and whether you want to make use of "on-scroll" effects such as a shrinking logo or color/transparency change. So, if the above code doesn't get you there, you can check out a plugin I made to fix Squarespace Headers on Brine templates, or try posting a link to your site/page in question (and the view-only password for trial-mode sites). Someone may be able to help you out further, especially if you can speak to some of the factors I mentioned. -Brandon If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
AWC914 Posted October 24, 2019 Author Share Posted October 24, 2019 Thanks Brandon. Ideally I'd like a background colour to appear once you begin to scroll as the nav links are white and disappear into the background of the site, as displayed in the screenshot. What you've provided above does stick the header to the top when scrolling though -- thank you Link to comment
brandon Posted October 24, 2019 Share Posted October 24, 2019 I understand. That does get a bit more complicated, requiring JavaScript (see previous answer). It's possible someone may come along and provide some more advanced code for you. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
jaisequoia Posted November 10, 2019 Share Posted November 10, 2019 hi @brandon I just had a look at your fixit website and am interested in your fixed menu code. Just to let you know your demo site link is broken (the link that says "Here’s an example site with Fixit added." I would like to see the demo. Can you send it on please? Link to comment
brandon Posted November 10, 2019 Share Posted November 10, 2019 @jaisequoia: Thanks for letting me know. I've re-enabled the demo site. If you have any questions, drop me a line. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.