diegomoura Posted June 24, 2020 Share Posted June 24, 2020 (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! Edited June 24, 2020 by diegomoura better explain the problem in the title Link to comment
Solution Beyondspace Posted June 29, 2020 Solution Share Posted June 29, 2020 Hi, Did you add the script into individual pages in the main navigation Advanced->Custom Code diegomoura 1 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, Lightbox Studio pluginIf 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
diegomoura Posted June 29, 2020 Author Share Posted June 29, 2020 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! Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment