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 comment
  • 1 month later...

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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 comment
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, Portfolio hover Replace Link Style
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 comment

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 comment
  • 2 weeks later...

@lysbeth123 Have you found the solution yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

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 comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
Posted (edited)

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 comment
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. 

original.pngaltered_website.png

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

image.thumb.png.3b36c2cabc370baac8a3ec17090f6722.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1 month later...
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

Edited by dean1
Link to comment
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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
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:

 

Screen Shot 2021-06-22 at 10.32.43 AM.png

Screen Shot 2021-06-22 at 10.32.49 AM.png

Edited by dean1
Link to comment

Don't remove above code

Add this

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...