How to use different site headers on different pages on 7.1?

Hi! I'm very new with Squarespace and I have found it quite easier to work with 7.1 version. I have a personal blog, I have built a home page, and the blog separately. I would really like to use to a different (or at least a different logo) on the blog page and each blog post. Is there a possibility of doing it with CSS? I'm not code-savvy at all, so I'd appreciate anyone's help. 

With Logo, you can use custom CSS or jQuery/JavaScript to change logo

With Navigation, you can put all items to Main Navigation, then use CSS to hide homepage items on Blog page/post, and hide blog items on Homepage

If you can share link to homepage and blog page/post, we can take a look.

Thanks so much for the answer! The new site isn't up yet, I'm working on it and I'll have to transfer the domain, so I guess I can't share the link?

Could you give me the CSS that you would use for this? I think only changing the logo image for the blog and posts would be great.

Thank you very much for the help

See my signature to know share url.

If you can't share url, difficult to give exactly code, and you won't even get an answer

To change Logo, i always use this code

<script>
  $(".scrollNav img").attr("src", "https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg")
</script>

Thank you very much! I just sent you an email with the website and the password 🙂

Sent answer to you.

I've managed to remove the logo from the home page site header on desktop using the code below. However, it's still showing on mobile. How can I remove it from both, please? 

}
.homepage .header-title-logo {
  display: none!important;
}

On 1/11/2021 at 3:42 AM, LYDIAPALESCHI said:

I've managed to remove the logo from the home page site header on desktop using the code below. However, it's still showing on mobile. How can I remove it from both, please? 

}
.homepage .header-title-logo {
  display: none!important;
}

 

Can you share site url? We can check easier

stozzys.com/read-stories

On 4/1/2021 at 12:57 AM, lydialsp said:

stozzys.com/read-stories

Use this new code

/* remove homepage logo */
.homepage .header-title-logo, homepage .header-mobile-logo img {
  display: none!important;
}

Hi! 

I miss what would be an easy function that would be to choose wheather a header is visible or not on a specific page. 

The reason for this if because im doing a landingpage google-ad-based and i dont want the header to appear in the landingpage. 

Maybe i missed something that already is doable? 

@sanderino

If you are using v7.1, SS removed the cover page which are in v7.0.

What you want to do is doable with custom CSS. There have been several posts covering how to do what you want.

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

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

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

I'm having the same issue and don't know enough of CSS to modify it for my page.

here's the "landing page" that I would like not have a header (or a footer)

studioalponte.com/welcome

Appreciate anyone able to help!

3 hours ago, StudioAlPonte said:

I'm having the same issue and don't know enough of CSS to modify it for my page.

here's the "landing page" that I would like not have a header (or a footer)

studioalponte.com/welcome

 

Appreciate anyone able to help!

It looks like you figured it out?

Hi, I'd like to have a custom navigation for one of the pages on my site. And i'd also like to make it a sticky header just on that page. Is that possible? It seems like you said there was a way to show/hide navigation items on certain pages?

14 hours ago, 84372193095432-13 said:

Hi, I'd like to have a custom navigation for one of the pages on my site. And i'd also like to make it a sticky header just on that page. Is that possible? It seems like you said there was a way to show/hide navigation items on certain pages?

Can you share link to a page & desired custom navigation layout? We can check easier

15 hours ago, tuanphan said:

Can you share link to a page & desired custom navigation layout? We can check easier

Hi, I figured out how to show/ hide nav items on specific pages and add a sticky nav bar for just one page from other threads in this forum that you helped out with. Thanks!

Alright, I am reading through this, and I am looking for a similar solution, but my goal isn't to change the logo, as much as to limit navigation choices on certain pages. The following commenter stated this was possible with CSS:

On 1/4/2020 at 6:47 AM, tuanphan said:

With Navigation, you can put all items to Main Navigation, then use CSS to hide homepage items on Blog page/post, and hide blog items on Homepage

Is that true, and how would I go about doing this? My goal is just to hide certain options and elements from my menu bar on certain pages. My site is: https://stmarkgala.org

The page I am looking to limit options for is https://stmarkgala.org/sponsors-corp. And I am aiming to hide the buy tickets button, as well as the 'Volunteer' and 'Sign In' links.

On 2/23/2023 at 6:19 AM, HumbleDevID said:

The page I am looking to limit options for is... And I am aiming to hide the buy tickets button, as well as the 'Volunteer' and 'Sign In' links.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  /* hide some elements in header */
  
  /* desktop */
  
  html:not( .squarespace-damask ) .header-nav .header-nav-item:nth-child( 3 ),
  html:not( .squarespace-damask ) .header-nav .header-nav-item:nth-child( 4 ),
  html:not( .squarespace-damask ) .header-actions--right .header-actions-action,
  
  /* mobile */
  
  html:not( .squarespace-damask ) .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 3 ),
  html:not( .squarespace-damask ) .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 4 ),
  html:not( .squarespace-damask ) .header-menu .header-menu-cta
  
    {
    
      display : none;
      
      }
      
  </style>

This is for v7.1.

Let us know how it goes.

7 hours ago, creedon said:

Add the [above code] to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

Let us know how it goes.

creedon, as a high-level contributor to this forum, you simply don't get enough gratitude for what you do!

The obvious answer was HTML modification from the beginning, duh! It used to be that everything had a Squarespace ID in v5, and for the life of me, I couldn't find it. That all must have disappeared for 7.1 (I am a little rusty on Squarespace, haven't built something here in a minute).

If you have a buymeacoffee link, message me with it, and I'll throw something your way. I owe you big time!

I tried using the code here on one of my site pages, but it doesn't work... Is this specific to a certain template? And how do you identify the child number? it looks like the nav links are under separate divs starting with "<div class="header-nav-item header-nav-item--collection">", does this change how this code would work for my site?

On 2/24/2023 at 12:37 AM, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  /* hide some elements in header */
  
  /* desktop */
  
  html:not( .squarespace-damask ) .header-nav .header-nav-item:nth-child( 3 ),
  html:not( .squarespace-damask ) .header-nav .header-nav-item:nth-child( 4 ),
  html:not( .squarespace-damask ) .header-actions--right .header-actions-action,
  
  /* mobile */
  
  html:not( .squarespace-damask ) .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 3 ),
  html:not( .squarespace-damask ) .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 4 ),
  html:not( .squarespace-damask ) .header-menu .header-menu-cta
  
    {
    
      display : none;
      
      }
      
  </style>

Let us know how it goes.

1 hour ago, abbym119 said:

Is this specific to a certain template?

The code is for v7.1.

Quote

And how do you identify the child number?

Count the number of menu items starting from one.

Quote

it looks like the nav links are under separate divs

SS maintains two versions of a site menu. One for desktop and one for mobile. The code covers both cases.

Hi 

What CSS can I use to replace the logo and and chance the color of the main naivgation to black only on certain pages? 

20 hours ago, SonsOfAres said:

Hi 

What CSS can I use to replace the logo and and chance the color of the main naivgation to black only on certain pages? 

Hi,

Depend on your template. Can you share link to a page? We can check easier

Hello, I have a similar issue to the ones above. I have a site where I am trying to create a page with a different header and footer to the main navigation, as well as a different menu. Is this at all possible? 

I am not on a plan that gives me access to inject custom codes on specific pages, so maybe this wont work? But I am not sure how to go about this. 

The page I am trying to change is: https://dianejonesdesign.co.uk/teaching-website

(- I have only removed the website's header and footer and done a make shift header and footer from buttons and text - not sure if this is all I can do...?)

and the normal homepage that i don't want to be affected is: https://dianejonesdesign.co.uk (+the rest of the site)

Please let me know if this is at all possible!

Thanks