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

Site URL: https://www.affinityauthorservices.com

I am looking to relocate my header navigation below my header banner exactly like this site: https://harlow.showit.site/
 

I also would like to know how to center my logo and have my links on either side like this website as well!

Any help at all would be amazing. I have not been able to find any CSS regarding this and the ones I did find did not work for me.

Unpublished/still in progress site: www.affinityauthorservices.com

PW: AAS

following

Add this code to Home > Design > Custom CSS. Replace beaverhero with your banner image url.

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

Hi tuanphan, thank you for the code above, it is exactly what I need. But I want a video instead of an image and am not sure where to place the video url. Do I need to embed code instead?

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(PUT VIDEO URL HERE??);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

25 minutes ago, lysbeth123 said:

Hi tuanphan, thank you for the code above, it is exactly what I need. But I want a video instead of an image and am not sure where to place the video url. Do I need to embed code instead?

 

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(PUT VIDEO URL HERE??);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

background image only with work with regular image or gif file url, not video

Okay, bummer. Thank you bangank36.

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(PUT VIDEO URL HERE??);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

@lysbeth123 Have you found the solution yet?

@tuanphan the code works great but is it possible to add the text like in the example site? 

On 4/11/2021 at 5:34 PM, Alexiia said:

@tuanphan the code works great but is it possible to add the text like in the example site? 

You mean this text? + SCROLL TO EXPLORE

Can the menu be moved below a SECTION rather than just a static banner? so the top section could have links ect? 

On 4/28/2021 at 8:51 AM, ryan.eaton said:

Can the menu be moved below a SECTION rather than just a static banner? so the top section could have links ect? 

Can you share link to your site? We can check easier

17 hours ago, tuanphan said:

Can you share link to your site? We can check easier

This is what ive created for a studio who wanted clickable links in the top banner (and I HATE IT), I wish we could position the normal menu under a section rather than having to code something.

https://www.razstudios.com.au

On 5/4/2021 at 8:06 AM, ryan.eaton said:

This is what ive created for a studio who wanted clickable links in the top banner (and I HATE IT), I wish we could position the normal menu under a section rather than having to code something.

https://www.razstudios.com.au

 

You mean move "enroll here.." violet bar, under kid banner?

Nah the site looks how I want it, but I don't like the menu I had to create using code, it doesn't sit well on the page and I was hoping there was a way to just put the normal Squarespace menu back in but have it sit where the other menu is now. 

On 5/5/2021 at 8:54 AM, tuanphan said:

You mean move "enroll here.." violet bar, under kid banner?

I still don't quite understand. Do you have a mockup descript what you want?

I have used another website as an example. This is the normal menu and I just want to have it below a section, and still be able to have an image and text and links (if I want it) in the section above... but just have the normal menu below. 

On 5/10/2021 at 7:02 PM, ryan.eaton said:

I have used another website as an example. This is the normal menu and I just want to have it below a section, and still be able to have an image and text and links (if I want it) in the section above... but just have the normal menu below. 

I see menu is under banner here. What is your problem?

On 12/24/2020 at 2:29 AM, tuanphan said:

Add this code to Home > Design > Custom CSS. Replace beaverhero with your banner image url.

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

 

Hi there,

We're trying to implement this CSS code on a website we're doing for a client. It doesn't seem to be doing anything...

We want an image ABOVE the navigation bar - when entering this code nothing happens. We replace the entire beaverhero http with our own (not sure we're doing that correctly though we have tried many many ways)

The site is currently password protected as it's not to be published until we finish designing it. 

https://tapestryministries.squarespace.com 

pwd: Tapestry2021

14 hours ago, dean1 said:

Hi there,

We're trying to implement this CSS code on a website we're doing for a client. It doesn't seem to be doing anything...

We want an image ABOVE the navigation bar - when entering this code nothing happens. We replace the entire beaverhero http with our own (not sure we're doing that correctly though we have tried many many ways)

The site is currently password protected as it's not to be published until we finish designing it. 

https://tapestryministries.squarespace.com 

pwd: Tapestry2021

The code should work. See here: https://www.loom.com/share/0f2bcabc28d4400796f3f859d166ada4

Can you take a quick video how did you add the code?

9 hours ago, tuanphan said:

The code should work. See here: https://www.loom.com/share/0f2bcabc28d4400796f3f859d166ada4

Can you take a quick video how did you add the code?

 

Okay we got it! We had font codes in there and that was causing the code to not work.

But now we want to know how to adjust the focus of that image if that's possible? Specifically on the mobile site. We want the graphic to be the focus on the mobile site at the top:

Don't remove above code

Add this

@media screen and (max-width:767px) {
body.homepage div#siteWrapper:before {
    height: 200px !important;
}
}

On 5/16/2021 at 12:21 PM, tuanphan said:

I see menu is under banner here. What is your problem?

That menu is actually a html code I added to create a menu, its not the native squarespace nav bar. When a new page is added by the client the html code needs to be updated every time so it appears.  I just want to know if I can move the native nav bar down. 

 I was hoping for some kind of code to display the native navigation in section[data-section-id="5feecde618d44937a9af2e33"] - the purple bar below. 

On 1/12/2022 at 10:22 AM, ryan.eaton said:

That menu is actually a html code I added to create a menu, its not the native squarespace nav bar. When a new page is added by the client the html code needs to be updated every time so it appears.  I just want to know if I can move the native nav bar down. 

 I was hoping for some kind of code to display the native navigation in section[data-section-id="5feecde618d44937a9af2e33"] - the purple bar below. 

Move this?

On 4/17/2021 at 8:28 AM, tuanphan said:

You mean this text? + SCROLL TO EXPLORE

@tuanphan any suggestions on how to implement this text like they do in the example?

On 1/13/2022 at 10:11 PM, ferguswood said:

@tuanphan any suggestions on how to implement this text like they do in the example?

Add text only or clickable-text? Can you share link to your site?