Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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

Edited by AffinityAuthorServices
Link to post
  • 1 month later...
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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: u

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

Posted Images

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;
}

 

Edited by tuanphan
Link to post
  • 2 months later...

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;
}
Link to post
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

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;
}
Link to post
  • 2 weeks later...
  • 2 weeks later...
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

Link to post
  • 2 weeks later...
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

Link to post
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

 

Link to post
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?

Link to post

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. 

Link to post
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?

Link to post

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. 

original.pngaltered_website.png

Edited by ryan.eaton
order
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...