Jump to content

How Can I Add a Page Section Above the Header Navigation

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

 

I'm hoping someone can help me with adding a page section or a banner that can contain images above the navigation on a website I'm building.

I'm trying to add a black section which contains the logo on the left and another image on the right.

I've added an image and hopefully you can understand what I mean from the image.

IMG-20231019-WA0004.thumb.jpg.3b2d06d2db21ce5ceb28e24633075466.jpgThank you

Link to comment
  • Solution
On 11/7/2023 at 6:27 PM, ShortAngryViking said:

I am keen to put it on every page. 

 

You can add a Not Linked Page > Design a section (Keep the page url slug: /above-header

Next, install Section Loader Plugin (affiliate link) or this link (non-affiliate link)

Next, add this code to bottom of Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div data-wm-plugin="load" data-target="/above-header"></div>
<script>
  document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/above-header') return;
  $('div.wm-load-container').insertBefore('header#header');
})
</script>

Next, add this code to Website > Website Tools (under Not Linked) > 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;
}

 

Edited by tuanphan
missing a plugin code

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
  • 4 months later...
On 11/10/2023 at 3:02 AM, tuanphan said:

You can add a Not Linked Page > Design a section (Keep the page url slug: /above-header

Next, install Section Loader Plugin (affiliate link) or this link (non-affiliate link)

Next, add this code to bottom of 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 Website > Website Tools (under Not Linked) > 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;
}

 

Hi @tuanphan! I followed this to a T, but the section isn't displaying above my header. Hoping you can help?

https://potato-goose-e48n.squarespace.com/
pw: bockmaster

Link to comment
On 4/4/2024 at 8:58 PM, mbockmaster said:

Hi @tuanphan! I followed this to a T, but the section isn't displaying above my header. Hoping you can help?

https://potato-goose-e48n.squarespace.com/
pw: bockmaster

I see it already worked here, you try checking it again

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 11/10/2023 at 2:02 AM, tuanphan said:

You can add a Not Linked Page > Design a section (Keep the page url slug: /above-header

Next, install Section Loader Plugin (affiliate link) or this link (non-affiliate link)

Next, add this code to bottom of 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 Website > Website Tools (under Not Linked) > 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;
}

 

Hi there, I also think I followed this but can't seem to get it to work. Would you mind looking? Site is cello-fuchsia-szyd.squarespace.com and pw is 1234

Thank you in advance!

Link to comment
12 hours ago, BloomingDesignCo said:

Hi there, I also think I followed this but can't seem to get it to work. Would you mind looking? Site is cello-fuchsia-szyd.squarespace.com and pw is 1234

Thank you in advance!

Change this code

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

to this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div data-wm-plugin="load" data-target="/above-header"></div>
<script>
  document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/above-header') return;
  $('div.wm-load-container').insertBefore('header#header');
})
</script>

 

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
7 hours ago, tuanphan said:

Change this code

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

to this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div data-wm-plugin="load" data-target="/above-header"></div>
<script>
  document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/above-header') return;
  $('div.wm-load-container').insertBefore('header#header');
})
</script>

 

Thank you so much for getting back to me! I replaced that code, but now I only see it working on the /above-header page, and it doesn't seem to bring up the whole section where the div was, it's only bringing up the div itself. Here I added text inside the div just to show, but the green area is really what I'd like to bring into the header, and on the home page as well, not just this page. Is that possible?

Screenshot 2024-05-22 at 9.42.20 AM.png

Edited by BloomingDesignCo
Link to comment
19 hours ago, BloomingDesignCo said:

Thank you so much for getting back to me! I replaced that code, but now I only see it working on the /above-header page, and it doesn't seem to bring up the whole section where the div was, it's only bringing up the div itself. Here I added text inside the div just to show, but the green area is really what I'd like to bring into the header, and on the home page as well, not just this page. Is that possible?

Screenshot 2024-05-22 at 9.42.20 AM.png

(1) Move this line

<div data-wm-plugin="load" data-target="/above-header"></div>

to Code Injection > Header, under plugin code

image.thumb.png.f8561c39cb073944d25cf59c6bbeb562.png

(2) Next, remove this code

image.thumb.png.ae0bd7f06047c86fa0d352910bd163f6.png

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.