Adding a section above navigation on all pages including blog posts

I am using the following code injection to position a section above my navigation header on every page. The issue I am having is this solution doesn't work for the blog page and blog posts. 

The website is www.mimicojunioralacrosse.com 

Password is: colleen

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    if (!isEditMode() && !isBlogPage()) {
      $('header#header').insertAfter('article section:first-child');
    }
  });

  function isEditMode() {
    // Check for a class or attribute that Squarespace adds in edit mode
    return $('body').hasClass('squarespace-edit-mode'); 
  }

  function isBlogPage() {
    // Check if the URL contains '/news', indicating it's a blog page
    return window.location.pathname.includes('/news');
  }
</script>

<style>
  header#header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    background-color: white !important;
  }
</style>

Will your code move page content first section above navigation?

On 3/2/2024 at 3:46 AM, tuanphan said:

Will your code move page content first section above navigation?

Yes that is what it's doing currently so the code I am using is working for every page but blog posts.

I would like also like it to apply to the desktop only if possible but that isn't a priority.

On 2/28/2024 at 11:10 PM, collgrimes said:

I am using the following code injection to position a section above my navigation header on every page. The issue I am having is this solution doesn't work for the blog page and blog posts. 

The code doesn't work because there are no sections in blog posts. How would you want this to work for blog posts? What would be the "first section"? 

1 hour ago, melody495 said:

The code doesn't work because there are no sections in blog posts. How would you want this to work for blog posts? What would be the "first section"? 

That's right - I know why it isn't working ( there are no sections in blog posts) and am wondering if there is another way to achieve this on blog posts. The section I've placed above the header here is what I want to keep at the top.

This is what it looks like on the blog pages:

I updated it so that this only happens on desktop not mobile which is definitely better. Would like to figure out a solution for blog posts as the header completely disappears there making it hard to navigate back to the home page.

<script>
  $(document).ready(function(){
    // Check if the screen width is 768 pixels or more (desktop)
    if (window.innerWidth >= 768) {
      if (!isEditMode() && !isBlogPage()) {
        $('header#header').insertAfter('article section:first-child');
      }
    }
  });

  function isEditMode() {
    // Check for a class or attribute that Squarespace adds in edit mode
    return $('body').hasClass('squarespace-edit-mode'); // Adjust as needed
  }

  function isBlogPage() {
    // Check if the URL contains '/news', indicating it's a blog page
    return window.location.pathname.includes('/news');
  }
</script>

21 hours ago, collgrimes said:

I updated it so that this only happens on desktop not mobile which is definitely better. Would like to figure out a solution for blog posts as the header completely disappears there making it hard to navigate back to the home page.

I see what you've done. Hmm, I don't think this approach would work universally across all of your web pages. You would want to insert a common div rather than move a div within each page.

I came across this, this sounds like it would do what you are looking for?