Making A Hero Heading Stick to the Navbar as the brand / logo

Hey all! I’m trying to come up with a creative solution for my web design website. I don’t currently have a logo and I want to use the heading in my hero title as the logo. Having the same text in my navbar as the hero title looks weird.

So what I want to do is have the Navbar “grab” the title as you scroll and once you move past that point on the site, the title just becomes to logo. I also want to add an interaction so that the title shrinks to an appropriate size when it becomes a part of the navbar. I’m having a hell of a time trying to use the sticky option to do this.

Any suggestions or ideas??

Here is the read only link:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)