Horizon_Growth Posted November 3, 2023 Share Posted November 3, 2023 Hi, I'm hoping someone can help me with adding a page section or a banner that can contain images above the navigation on a website I'm building. I'm trying to add a black section which contains the logo on the left and another image on the right. I've added an image and hopefully you can understand what I mean from the image. Thank you Link to comment
tuanphan Posted November 6, 2023 Share Posted November 6, 2023 Hi, This is possible, I solved 3 cases last week. You want to do this on homepage only or all pages? We can give exact approach easier. ShortAngryViking 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ShortAngryViking Posted November 7, 2023 Share Posted November 7, 2023 I am keen to put it on every page. Link to comment
Solution tuanphan Posted November 10, 2023 Solution Share Posted November 10, 2023 (edited) On 11/7/2023 at 6:27 PM, ShortAngryViking said: I am keen to put it on every page. You can add a Not Linked Page > Design a section (Keep the page url slug: /above-header Next, install Section Loader Plugin (affiliate link) or this link (non-affiliate link) Next, add this code to bottom of Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <div data-wm-plugin="load" data-target="/above-header"></div> <script> document.addEventListener('wmSectionLoader:loaded', ({detail}) => { if (detail.target !== '/above-header') return; $('div.wm-load-container').insertBefore('header#header'); }) </script> Next, add this code to Website > Website Tools (under Not Linked) > Custom CSS /* Add sticky header */ header#header { position: sticky !important; position: -webkit-sticky !important; top: 0; } /* section above header */ .wm-load-container>section:first-child { display: none; } .wm-load-container .content-wrapper { padding: 0 !important; max-width: 100% !important; } Edited May 22 by tuanphan missing a plugin code ShortAngryViking, Horizon_Growth and sayreambrosio 1 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mbockmaster Posted April 4 Share Posted April 4 On 11/10/2023 at 3:02 AM, tuanphan said: You can add a Not Linked Page > Design a section (Keep the page url slug: /above-header Next, install Section Loader Plugin (affiliate link) or this link (non-affiliate link) Next, add this code to bottom of Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ setTimeout( function() { $('div.wm-load-container').insertBefore('header#header'); }, 2000); }); </script> Next, add this code to Website > Website Tools (under Not Linked) > Custom CSS /* Add sticky header */ header#header { position: sticky !important; position: -webkit-sticky !important; top: 0; } /* section above header */ .wm-load-container>section:first-child { display: none; } .wm-load-container .content-wrapper { padding: 0 !important; max-width: 100% !important; } Hi @tuanphan! I followed this to a T, but the section isn't displaying above my header. Hoping you can help? https://potato-goose-e48n.squarespace.com/ pw: bockmaster Link to comment
tuanphan Posted April 7 Share Posted April 7 On 4/4/2024 at 8:58 PM, mbockmaster said: Hi @tuanphan! I followed this to a T, but the section isn't displaying above my header. Hoping you can help? https://potato-goose-e48n.squarespace.com/ pw: bockmaster I see it already worked here, you try checking it again mbockmaster 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mbockmaster Posted April 8 Share Posted April 8 On 4/6/2024 at 11:45 PM, tuanphan said: I see it already worked here, you try checking it again I removed everything and tried again and it worked! Thanks so much! tuanphan 1 Link to comment
BloomingDesignCo Posted May 21 Share Posted May 21 On 11/10/2023 at 2:02 AM, tuanphan said: You can add a Not Linked Page > Design a section (Keep the page url slug: /above-header Next, install Section Loader Plugin (affiliate link) or this link (non-affiliate link) Next, add this code to bottom of Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ setTimeout( function() { $('div.wm-load-container').insertBefore('header#header'); }, 2000); }); </script> Next, add this code to Website > Website Tools (under Not Linked) > Custom CSS /* Add sticky header */ header#header { position: sticky !important; position: -webkit-sticky !important; top: 0; } /* section above header */ .wm-load-container>section:first-child { display: none; } .wm-load-container .content-wrapper { padding: 0 !important; max-width: 100% !important; } Hi there, I also think I followed this but can't seem to get it to work. Would you mind looking? Site is cello-fuchsia-szyd.squarespace.com and pw is 1234 Thank you in advance! Link to comment
tuanphan Posted May 22 Share Posted May 22 12 hours ago, BloomingDesignCo said: Hi there, I also think I followed this but can't seem to get it to work. Would you mind looking? Site is cello-fuchsia-szyd.squarespace.com and pw is 1234 Thank you in advance! Change this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ setTimeout( function() { $('div.wm-load-container').insertBefore('header#header'); }, 2000); }); </script> to this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <div data-wm-plugin="load" data-target="/above-header"></div> <script> document.addEventListener('wmSectionLoader:loaded', ({detail}) => { if (detail.target !== '/above-header') return; $('div.wm-load-container').insertBefore('header#header'); }) </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BloomingDesignCo Posted May 22 Share Posted May 22 (edited) 7 hours ago, tuanphan said: Change this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ setTimeout( function() { $('div.wm-load-container').insertBefore('header#header'); }, 2000); }); </script> to this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <div data-wm-plugin="load" data-target="/above-header"></div> <script> document.addEventListener('wmSectionLoader:loaded', ({detail}) => { if (detail.target !== '/above-header') return; $('div.wm-load-container').insertBefore('header#header'); }) </script> Thank you so much for getting back to me! I replaced that code, but now I only see it working on the /above-header page, and it doesn't seem to bring up the whole section where the div was, it's only bringing up the div itself. Here I added text inside the div just to show, but the green area is really what I'd like to bring into the header, and on the home page as well, not just this page. Is that possible? Edited May 22 by BloomingDesignCo Link to comment
tuanphan Posted May 23 Share Posted May 23 19 hours ago, BloomingDesignCo said: Thank you so much for getting back to me! I replaced that code, but now I only see it working on the /above-header page, and it doesn't seem to bring up the whole section where the div was, it's only bringing up the div itself. Here I added text inside the div just to show, but the green area is really what I'd like to bring into the header, and on the home page as well, not just this page. Is that possible? (1) Move this line <div data-wm-plugin="load" data-target="/above-header"></div> to Code Injection > Header, under plugin code (2) Next, remove this code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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