mshlltg 1 Share Posted October 7, 2020 Site URL: https://www.inoutatelier.com Hi all, Please see attached site url. Previously I tried to to make the header sticky at the top but it always appear to at the back of all my content as I scrolled down. Also I would need it have a solid background for the header, and centralised too. Can anyone help with this? Many thanks. Link to post
0 tuanphan 9,560 Share Posted October 7, 2020 Add to Home > Design > Custom CSS .Header-inner--bottom>div { flex-direction: column; } mshlltg 1 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 mshlltg 1 Author Share Posted October 7, 2020 Thank you! The centralise worked. I also need the header to be fixed at the top with background when I scroll down, appreciate if you can help on the code. Thank you! Link to post
0 tuanphan 9,560 Share Posted October 10, 2020 Do you use Personal or higher plan? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 tuanphan 9,560 Share Posted October 14, 2020 Add to Home > Settings > Advanced > Code Injection > Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { //Sticky Header start header = $('header.Header.Header--bottom'); if ($(window).scrollTop() > 30 ) { header.addClass("sticky"); } else { header.removeClass("sticky"); } }); </script> <style> .sticky { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; background: red; } </style> Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 Sarah-W 4 Share Posted October 17, 2020 Hi Tuan, I would like to make 1 section sticky at the top of one page only and with a transparent background (it's a narrow line of text acting as navigation anchor links). I'm trying to customise the code you gave above, but not having much luck. I put it in Advanced injection code of that page only, right? Is anything required to go in Design/Advanced/CSS to make it transparent? This is the section ID: section[data-section-id="5f59e427074004756e44cdd8"] Thanks so much in advance. Link to post
0 Sarah-W 4 Share Posted October 17, 2020 @tuanphan Sorry, I shouldn't have said transparent, I mean 50% opacity white. Thanks Link to post
0 tuanphan 9,560 Share Posted October 17, 2020 4 hours ago, Sarah-W said: @tuanphan Sorry, I shouldn't have said transparent, I mean 50% opacity white. Thanks Can you share site url? We can check easier Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
mshlltg 1
Site URL: https://www.inoutatelier.com
Hi all,
Please see attached site url.
Previously I tried to to make the header sticky at the top but it always appear to at the back of all my content as I scrolled down. Also I would need it have a solid background for the header, and centralised too. Can anyone help with this?
Many thanks.
Link to post
Top Posters For This Question
4
3
2
Popular Days
Oct 17
3
Oct 7
3
Oct 10
1
Oct 13
1
Top Posters For This Question
tuanphan 4 posts
mshlltg 3 posts
Sarah-W 2 posts
Popular Days
Oct 17 2020
3 posts
Oct 7 2020
3 posts
Oct 10 2020
1 post
Oct 13 2020
1 post
Popular Posts
tuanphan
Add to Home > Design > Custom CSS .Header-inner--bottom>div { flex-direction: column; }
8 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment