Move Navigation Under First Section

https://perch-sparrow-5acs.squarespace.com/

password: 12345

Hi! My clients would like for the navigation (pill shaped buttons) to be moved under the first section ("Murrells Gone Wild! Andrew and Emily are getting married")- and remained fix as you scroll. Can someone help me with this? Thank you 

Simplest way would be to create the text as an image and use it in the logo field of the header. Alternatively injecting it into the header with CSS and styling should work.

You try this code (Website Tools > Code Injection > Footer)

<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>