How do I move my navigation bar below my header banner in 7.1?

26 minutes ago, CaleyS said:

Is it possible to make this have an editable section, where you can add blocks of text, an image or even an email signup form?

I really like this example here: https://havilahcunnington.com/#home but can't figure out how to match this style.

The site you've linked is a Showit site (not a Squarespace site). There isn't a built in feature like this, but if you're familiar with JavaScript, you should be able to write some code that moves a page section above the header.

46 minutes ago, paul2009 said:

The site you've linked is a Showit site (not a Squarespace site). There isn't a built in feature like this, but if you're familiar with JavaScript, you should be able to write some code that moves a page section above the header.

I am not familiar with Javascript. Is there a way to still do this with Squarespace?
 

Hello, 

I'm trying to add a section above the navigation that's similar to this website. The example is a Showit website, but I'm hoping there is a workaround for Squarespace too. I tried turning on the announcement bar, but it's really small for what I'm after.

I need this "above nav" section to have:

• video background capabilities
• text block; and
• button functionalities.

Any help would greatly be appreciated!

Thank you!

On 10/29/2023 at 4:20 AM, CaleyS said:

Hello, 

I'm trying to add a section above the navigation that's similar to this website. The example is a Showit website, but I'm hoping there is a workaround for Squarespace too. I tried turning on the announcement bar, but it's really small for what I'm after.

I need this "above nav" section to have:

• video background capabilities
• text block; and
• button functionalities.

 

Any help would greatly be appreciated!

Thank you!

I just solved a similar case, I used Section Loader plugin + some JS code

https://www.will-myers.com/products/p/section-loader-supreme

First add a Not Linked Page (with url: nav-menu), design your content

Next, install plugin

Next, add this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  setTimeout( function() {
        	$('div.wm-load-container').insertBefore('header#header');
    }, 2000);
});
</script>

Next, add this code to Custom CSS

/* Add sticky header */
header#header {
    position: sticky !important;
  	position: -webkit-sticky !important;
    top: 0;
}
/* section above header */
.wm-load-container>section:first-child {
    display: none;
}
.wm-load-container .content-wrapper {
    padding: 0 !important;
    max-width: 100% !important;
}

Hello! I have been reading your comments for an hour or so, and it's amazing!

I would like to know how can I add text to the banner image? 

13 hours ago, fufu15 said:

Hello! I have been reading your comments for an hour or so, and it's amazing!

I would like to know how can I add text to the banner image? 

Which approach did you use to add banner? If you use my approach (above comment), just add Text Block over section

Hello all, I am trying to achieve the same thing as the original post (relocate header navigation below my header banner). I used the original code that was provided in the thread, but it is not working. I made sure to replace with beaverhero with my image URL.

Here is my website on the page I am trying to do this:

https://www.lucasano.com/home

And here is the code I inserted in the CSS under Home / Website Tools / Custom CSS:

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/660dabf2c74e425529726520/t/661a73f4b369d36c1bd3199b/1713009653619/TEST_home-page.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

Thanks for your help!

On 4/13/2024 at 7:25 PM, LukeDesign said:

Hello all, I am trying to achieve the same thing as the original post (relocate header navigation below my header banner). I used the original code that was provided in the thread, but it is not working. I made sure to replace with beaverhero with my image URL.

Here is my website on the page I am trying to do this:

https://www.lucasano.com/home

And here is the code I inserted in the CSS under Home / Website Tools / Custom CSS:

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/660dabf2c74e425529726520/t/661a73f4b369d36c1bd3199b/1713009653619/TEST_home-page.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

Thanks for your help!

 

The page doesnt' work

Hi!

This chat has been so useful! I used the code to place an image above the navigation. It worked, but I don't want it on the other pages. How do I keep it on the main page only?

Thank you!

On 5/15/2024 at 7:15 AM, Juniper said:

Hi!

This chat has been so useful! I used the code to place an image above the navigation. It worked, but I don't want it on the other pages. How do I keep it on the main page only?

Thank you!

Which code did you use?