Jump to content

Move navigation bar below my hero on homepage

Recommended Posts

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: 

 

Screenshot 2024-03-06 at 4.54.36 PM.png

Screenshot 2024-03-06 at 4.54.20 PM.png

Link to comment
  • Replies 8
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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!

Link to comment

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>

 

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

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?

Screenshot 2024-03-09 at 12.25.15 PM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.