BLOG POSTS Custom CSS for hiding navigation

Site URL: http://gc5.squarespace.com#/en/news/webinar-emlogistics-in-motionemstrong-23-de-abril-de-2020strong%3C/a%3E%0A%3C/p%3E%0A%0A%3Cp%3E%0A%09I'm%20also%20attaching%20the%20site%20structure%20so%20it%20help%20understand%20everything.%0A%3C/p%3E%0A%0A%3Cp%3E%0A%09Thank%20you%20very%20much!%0A%3C/p%3E%0A%3Cp%3E%3Ca%20href=%22%3CfileStore.core_Attachment%3E/monthly_2020_06/374589062_ScreenShot2020-06-24at9_48_50AM.png.c3639146cbb6f72c24b0c361ae96897c.png%22%20class=%22ipsAttachLink%20ipsAttachLink_image%22%3E%3Cimg%20data-fileid=%2276410%22%20src=%22//forum.squarespace.com/applications/core/interface/js/spacer.png%22%20data-src=%22%3CfileStore.core_Attachment%3E/monthly_2020_06/1138295493_ScreenShot2020-06-24at9_48_50AM.thumb.png.58e88e0f45d35160fb47a712930d368d.png%22%20data-ratio=%22255.97%22%20width=%22293%22%20class=%22ipsImage%20ipsImage_thumbnailed%22%20alt=%22Screen%20Shot%202020-06-24%20at%209.48.50%20AM.png%22%3E

Hi everyone:

I'm using the following code to display different headers depending on the language of the page the user is.

Pages in portuguese:

<style>
.header-nav-list>.header-nav-item:nth-child(odd) {
    display: none;
}
.header-menu-nav-folder-content>.header-menu-nav-item:nth-child(odd) {
    display: none;
}
.header-nav-item:nth-child(2) {
  position: absolute;
  left: 220px;
  top: 45%;
  width: 35px;
  background-image: url(https://static1.squarespace.com/static/5e67b3c9620bda7888c9d30f/t/5ede6e5005c57c3f0e700786/1591635536379/canada-flag.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.header-nav-item:nth-child(2) a{
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
}
  
.header-nav-item {
  padding: 15px 0;
}
.header-nav-item:nth-child(12) {
  background-color: #a61c00;
  padding: 15px 30px;
}

.header-nav-item:nth-child(12) a {
color: #ffffff !important;
}

.header-nav-item:nth-child(12):hover {
  transform: scale(1.05) translateY(-3px);
}

.header-nav-item:nth-child(12):active {
  transform: scale(1) translateY(0);
}

.header-nav-folder-content {
  background-color: #a61c00!important;
}

.header-nav-folder-content a {
color: #ffffff !important;
}
</style>

Pages in English

<style>
.header-nav-list>.header-nav-item:nth-child(even) {
    display: none;
}
.header-menu-nav-folder-content>.header-menu-nav-item:nth-child(even) {
    display: none;
}
  
.header-nav-item:first-child {
  position: absolute;
  left: 250px;
  top: 45%;
  width: 35px;
  background-image: url(https://static1.squarespace.com/static/5e67b3c9620bda7888c9d30f/t/5ede6e4e4379cc4af534e1d1/1591635534665/brazil-flag.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.header-nav-item:first-child a{
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
}
 .header-nav-item {
  padding: 15px 0;
}
.header-nav-item:nth-child(11) {
  background-color: #a61c00;
  padding: 15px 30px;
}

.header-nav-item:nth-child(11) a {
color: #ffffff !important;
}

.header-nav-item:nth-child(11):hover {
  transform: scale(1.05) translateY(-3px);
}

.header-nav-item:nth-child(11):active {
  transform: scale(1) translateY(0);
}

.header-nav-folder-content {
  background-color: #a61c00!important;
}

.header-nav-folder-content a {
color: #ffffff !important;
}
  

  
</style>

These codes are applied with code blogs in each individual page.

The following media query I added to the Custom CSS settings, so it applies to all pages on the mobile version, to fix the drop-down menu.

@media screen and (max-width: 800px) {
  .header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-folder-content .header-menu-nav-item {
    display: block !important;
  }
}

My question is:

How can I fix the individual blog posts so they display the correct header (same as the english pages). Now, none of this styles is applied on those pages.

Example: https://gc5.squarespace.com/en/news/webinar-emlogistics-in-motionemstrong-23-de-abril-de-2020strong

I'm also attaching the site structure so it help understand everything.

Thank you very much!

Hi,

No. I added through code block in each individual page. I think I see the solution. If I add it in custom code it should apply automatically to new pages right?

Thank you!