navigation How do i move the navigation bar below the first section/banner?

Site URL: https://www.davai.squarespace.com

Hi

I am wondering how i move the navigation bar below the first section/banner. I have seen this done on many websites, including ones, made with squarespace, although they could be done on version 7.0.

The website, on which i want to add this effect is davai.squarespace.com (password: davai) The effect has been achieved on our current website (davai.dk) for reference, but that is running on wordpress. Another example is https://harlow.showit.site/

I am sure this question has been raised before, but i have not been able to find a solution.

Once the navigation bar is removed from the first section/banner, i want it to be fixed.

The first section/banner should still have company logo in top left corner.

I have added an attachment of a video, where the effect is showcased.

i want to know this too!

On 12/22/2020 at 12:01 PM, ryan.eaton said:

i want to know this too!

Hi. If you share link to your site, we can help easier

Can you show how this can be done with CSS on a site using the Brine template?

On 8/13/2022 at 1:30 AM, kathrynbethard said:

Can you show how this can be done with CSS on a site using the Brine template?

If you share site url, we can check easier

If you use 7.1 code, you can use this script code (Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

</script>
<style>

@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(100vh - 93px)!important;
}
}

</style>

yes that code work but one issue there is , content appear on the top, check screenshot

Is there a way to do this with just the home page? 

48 minutes ago, mocreativestudio said:

Is there a way to do this with just the home page? 

 

try injecting the code on that page only. Remove it from the footer.

52 minutes ago, nosremetnarg said:

try injecting the code on that page only. Remove it from the footer.

Thank you! It worked! 

On 1/30/2023 at 1:32 AM, pexeldio said:

yes that code work but one issue there is , content appear on the top, check screenshot

What is site url? We can check problem easier

On 3/5/2023 at 10:24 AM, charlineca said:

Hi @tuanphan, I am using this code but I have a few problems with it:
It is not sticky when it reaches the top, and there is also some spacing under the navigation where the image from the first section shows again (I added a scroll effect to the first section, so it shows under the navigation now again). 

Could you help me with this? 

My website is https://wrasse-grouper-8fhf.squarespace.com/ and the password is squarespace.

Thanks!
 

It looks like you solved? It is fine to me