Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
diegomoura

BLOG POSTS Custom CSS for hiding navigation

Question

Posted (edited)

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!

Screen Shot 2020-06-24 at 9.48.50 AM.png

Screen Shot 2020-06-24 at 9.48.55 AM.png

Edited by diegomoura
better explain the problem in the title

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...