Move navigation bar below my hero on homepage

Hello

I'm trying to put my homepage navigation (only on the homepage) below the large ARGUS graphic. Then, on scroll, when the large ARGUS graphic is out of the viewport, the main nav appears with links on the right and a small argus logo on the left. I've attached 2 screenshots. One before scroll and one after. Any help would be appreciated.

https://toucan-tetra-fwm2.squarespace.com/

p: argus

I see this chat, but it's from 4 years ago and doesn't seem to be working: 

If you can move Hero Image to a new section, I can give you code to achieve nav under hero image

Ok. There is now an empty section below the nav. The design below the empty section, which includes a large PNG and text, should go in that blank section.

As a reminder, on the homepage only:

1. The main nav is below the large red ARGUS logo. This does not include the little ARGUS logo.

2. On scroll, the large ARGUS logo and nav scroll up together.

3. When the nav reaches the top, it gets stuck to the top of the page and the little ARGUS logo appears in the nav.

Thanks for the help!

Use code to Homepage Header Code Injection

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

Hey @tuanphan

This code works, but it's making the editing tools for sections further down the page, so I can't access them unless I adjust the section height to something tall. Take a look at the attached screenshot or visit the site.

It's also causing a very thin line below the main nav unless I make the main nav taller. 

https://toucan-tetra-fwm2.squarespace.com/

p: argus

Could you please help me?

You can access this url to able to edit page in edit mode

https://toucan-tetra-fwm2.squarespace.com/config/safe

That's great. Thanks for the insight.

Hello @tuanphan

Somehow the nav is not below the large ARGUS logo anymore on Chrome but is on Safari. I haven't touched anything up there. Could you take a look? See attached screenshots, too.

https://toucan-tetra-fwm2.squarespace.com/

p: argus

So you want to move large logo under nav?