How to move a section above site header

Hey all,

I'm trying to move a section above my site header (see image) but don't seem to be able to with any code I could find on other forums, Is anyone able to help out?

You can use this code to Page Header Code Injection. The code will move First Section above Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('article>section:first-child').insertBefore('header#header');
})
</script>
<style>
header#header {
   position: sticky !important;
  transform: Unset !important;
}
div#siteWrapper>section {
    padding: 0px !important;
    z-index: 999999 !important;
}
</style>

If you can't make code work, you can share link to page in screenshot, we can check easier

Hey @tuanphan
Thanks for posting this code, I've found it helpful.
Is there a way to get the first section to move above the header on the home page only?

Thanks in advance for your help!

On 6/5/2024 at 7:13 AM, BlancDesignStudio said:

Hey @tuanphan
Thanks for posting this code, I've found it helpful.
Is there a way to get the first section to move above the header on the home page only?

Thanks in advance for your help!

Use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('body.homepage article>section:first-child').insertBefore('body.homepage header#header');
})
</script>
<style>
body.homepage header#header {
   position: sticky !important;
  transform: Unset !important;
}
body.homepage div#siteWrapper>section {
    padding: 0px !important;
    z-index: 999999 !important;
}
</style>

@tuanphan I've just noticed on mobile view my menu navigation is showing behind the top section, do you happen to know if there is a way to bring this forward?

I've attached a screenshot for reference. 

URL: https://jaguar-red-txe9.squarespace.com/
PASSWORD: IslaKate

@BlancDesignStudio The code @tuanphan shared, affected both desktop and mobile layouts, which may not be a good user experience on mobile devices.

Here's the updated version that will only affect the desktop version:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('body.homepage article>section:first-child').insertBefore('body.homepage header#header');
})
</script>
<style>
@media screen and (min-width: 768px) {  
body.homepage header#header {
   position: sticky !important;
  transform: Unset !important;
}
body.homepage div#siteWrapper>section {
    padding: 0px !important;
    z-index: 999999 !important;
}
}
</style>

@Lesum Thank you! Worked perfectly!