diegomoura Posted June 24, 2020 Share Posted June 24, 2020 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! Link to comment
Beyondspace Posted June 29, 2020 Share Posted June 29, 2020 Hi, Did you add the script into individual pages in the main navigation Advanced->Custom Code BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.