Jump to content

Adding a section above navigation on all pages including blog posts

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

 

Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

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.

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

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

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

image.thumb.png.633a869b17ae688abcadb463f2dd875c.png

This is what it looks like on the blog pages:

image.thumb.png.ba5d820ba3613b782ffab3cbe054d2a0.png

Link to comment

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>

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

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like 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.