mshlltg Posted October 7, 2020 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 comment
tuanphan Posted October 7, 2020 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.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mshlltg Posted October 7, 2020 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 comment
tuanphan Posted October 10, 2020 Share Posted October 10, 2020 Do you use Personal or higher plan? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted October 14, 2020 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.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Sarah-W Posted October 17, 2020 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 comment
Sarah-W Posted October 17, 2020 Share Posted October 17, 2020 @tuanphan Sorry, I shouldn't have said transparent, I mean 50% opacity white. Thanks Link to comment
tuanphan Posted October 17, 2020 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.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment