Jump to content

Add Section above Navigation Bar

Go to solution Solved by whereisscott,

Recommended Posts

Hi all,

I'm starting a new website and one of the elements the client is asking for is a small section above the navigation bar for an image and some text (please see the attached).

Seems simple to do, but I haven't been able to land a solution yet.  Has anyone achieved something similar?

Thanks,
-Scott

Screenshot 2023-01-03 at 3.51.58 PM.png

Link to comment
3 hours ago, whereisscott said:

Hi all,

I'm starting a new website and one of the elements the client is asking for is a small section above the navigation bar for an image and some text (please see the attached).

Seems simple to do, but I haven't been able to land a solution yet.  Has anyone achieved something similar?

Thanks,
-Scott

Screenshot 2023-01-03 at 3.51.58 PM.png

Squarespace have a standard feature - announcement bar which appears on the top of your website.

If you need to add a custom layout like your images attached, we can add it on the footer and use some javascript code to move it above the header.

It is noticed that javascript is only available on Business Plan or above ones.

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

It's possible with CSS, but it depends

  • Black nav will stick to top on scroll or not?
  • This for one page or all pages?

With CSS the solution might be to create that section as the first section, then use CSS position to move the position of the two sections.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

Hi @tuanphan

Yes, I was able to do this - here's the code. It would only work for a single page since this targets only the section that would be on the homepage right now, but it's good to know how I'd do this.  (I've since created a workaround that includes the text the client wanted to be on the navigation bar).  Here's the code, though:

#header {
  position: absolute;
  top: 340px; /* This value determines the distance from the top of the page */
  left: 0;
}
section[data-section-id="NUM] {
  position: absolute;
  bottom: 190px; /* This value determines the distance from the top of the page */
  left: 0;
}

Link to comment
  • 4 weeks later...
On 2/4/2023 at 5:20 AM, Dovely2023 said:

Hi @tuanphan this was super helpful for us, but I noticed when I am previewing the site in the header it looks perfect but when I go to actually preview the link in a private browser the home page is all messed up. Do I need to adjust the css in some way? I'd appreciate your help! Screenshots below for reference. 

https://penguin-toucan-s42t.squarespace.com/

Password: DoveLove2023!

Screenshot 2023-02-03 at 4.17.02 PM.png

Screenshot 2023-02-03 at 4.16.53 PM.png

Which exact steps did you do to achieve this? We can troubleshoot easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

Which exact steps did you do to achieve this? We can troubleshoot easier

Hi @tuanphan I added the code below to the home page header code injection. Let me know if you have any other questions. Thank you!

<style>
  #header {
    position: absolute;
    top: 800px;
    left: 0;
  }
  section[data-section-id="63d2bf7a62c5995280861b4e"] {
    position: absolute;
    bottom: 50px;
    left: 0;
  }
  #siteWrapper.site-wrapper .sqs-button-element--primary {
    border-color: #E8927C;
  }
</style>
<style>
@media screen and (max-width: 641px) {
   #header {
    position: absolute;
    top: 650px;
    left: 0;
  }
  section[data-section-id="63d2bf7a62c5995280861b4e"] {
    position: absolute;
    bottom: 50px;
    left: 0;
  }
  #siteWrapper.site-wrapper .sqs-button-element--primary {
    border-color: #E8927C;
  }
  }
</style>

Link to comment
On 2/3/2023 at 4:20 PM, Dovely2023 said:

Hi @tuanphan this was super helpful for us, but I noticed when I am previewing the site in the header it looks perfect but when I go to actually preview the link in a private browser the home page is all messed up. Do I need to adjust the css in some way? I'd appreciate your help! Screenshots below for reference. 

https://penguin-toucan-s42t.squarespace.com/

Password: DoveLove2023!

Screenshot 2023-02-03 at 4.17.02 PM.png

Screenshot 2023-02-03 at 4.16.53 PM.png

Hi @whereisscott thank you for providing the code. It worked perfectly for our site. The only thing we noticed though is that the changes took in the editor preview mode, but when we view the site in a private window outside the editor the hero section looks completely off. You can see above for screenshots. Would you be able to help us with this? Our site URL is https://penguin-toucan-s42t.squarespace.com/ and the password is DoveLove2023! Thank you for advice you have. 

Link to comment
8 minutes ago, Dovely2023 said:

Hi @whereisscott thank you for providing the code. It worked perfectly for our site. The only thing we noticed though is that the changes took in the editor preview mode, but when we view the site in a private window outside the editor the hero section looks completely off. You can see above for screenshots. Would you be able to help us with this? Our site URL is https://penguin-toucan-s42t.squarespace.com/ and the password is DoveLove2023! Thank you for advice you have. 

Hi @whereisscott we actually found a better solution for the hero image above the navigation but now the entire section disappears when we preview the site outside the squarespace editor preview. Have you seen this before? Any ideas on how to fix? We would appreciate your help! 

PrivateBrowserPreview.png

EditorPreview.png

Link to comment
4 hours ago, Dovely2023 said:

Hi @whereisscott we actually found a better solution for the hero image above the navigation but now the entire section disappears when we preview the site outside the squarespace editor preview. Have you seen this before? Any ideas on how to fix? We would appreciate your help! 

PrivateBrowserPreview.png

EditorPreview.png

I actually figured this out. Thank you!

Link to comment
  • 5 months later...

Hello there,

 

I put this code in the homapage code injection and when I go to edit the page the edit bar is out of the section and I can't get to it. When I remove the code the problem is gone. Is there any solution?

 

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

Link to comment
1 hour ago, Despina said:

Hello there,

 

I put this code in the homapage code injection and when I go to edit the page the edit bar is out of the section and I can't get to it. When I remove the code the problem is gone. Is there any solution?

 

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

Suppose your site is despina.squarespace.com

You can access despina.squarespace.com/config/safe

It will disable code in Edit Mode, then you can edit everything in edit mode easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/4/2023 at 7:16 PM, Despina said:

 

OK I found it. "Enable scripts" .

Οne more question please. When the site is live, my client will be able to do the same for possible editing?

Yes. That link always work, for both trial & paid plan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 2/8/2023 at 6:44 AM, Dovely2023 said:

Hi @tuanphan I added the code below to the home page header code injection. Let me know if you have any other questions. Thank you!

<style>
  #header {
    position: absolute;
    top: 800px;
    left: 0;
  }
  section[data-section-id="63d2bf7a62c5995280861b4e"] {
    position: absolute;
    bottom: 50px;
    left: 0;
  }
  #siteWrapper.site-wrapper .sqs-button-element--primary {
    border-color: #E8927C;
  }
</style>
<style>
@media screen and (max-width: 641px) {
   #header {
    position: absolute;
    top: 650px;
    left: 0;
  }
  section[data-section-id="63d2bf7a62c5995280861b4e"] {
    position: absolute;
    bottom: 50px;
    left: 0;
  }
  #siteWrapper.site-wrapper .sqs-button-element--primary {
    border-color: #E8927C;
  }
  }
</style>

Hi, I tried using this. But doesn't seem to work on my end. Any help or tips?

Link to comment
On 10/4/2023 at 2:29 AM, PRHG said:

www.lawhg.net. Thank you!

Above code for SS 7.1, your site is 7.0

Use this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('body.homepage header#header').insertAfter('.banner-thumbnail-wrapper.has-description');
});
</script>
<style>
  body.homepage header#header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    background-color: white !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I used this code and it works but the section above the navigation is HUGE on desktop - how can I fix the size?

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

 

Link to comment
4 hours ago, collgrimes said:

how can I fix the size?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 10/7/2023 at 2:02 AM, tuanphan said:

Above code for SS 7.1, your site is 7.0

Use this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('body.homepage header#header').insertAfter('.banner-thumbnail-wrapper.has-description');
});
</script>
<style>
  body.homepage header#header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    background-color: white !important;
}
</style>

 

Hello! Sorry for the late reply. You are very helpful! Unfortunately, this is what it looked like. 

Link to comment
On 10/18/2023 at 11:39 PM, PRHG said:

Hello! Sorry for the late reply. You are very helpful! Unfortunately, this is what it looked like. 

You mean you want same video, or the code run and same as video and that's not what you want, so what is your desired result?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.