Jump to content

BLOG POSTS Custom CSS for hiding navigation

Go to solution Solved by Beyondspace,

Recommended Posts

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
Link to comment
  • Solution

Hi,

Did you add the script into individual pages in the main navigation Advanced->Custom Code

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.