How Can I Add a Page Section Above the Header Navigation

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.

Thank you

Hi,

This is possible, I solved 3 cases last week.

You want to do this on homepage only or all pages? We can give exact approach easier.

I am keen to put it on every page. 

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

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

On 4/6/2024 at 11:45 PM, tuanphan said:

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

I removed everything and tried again and it worked! Thanks so much!

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!

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>

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?

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?

(1) Move this line

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

to Code Injection > Header, under plugin code

(2) Next, remove this code