Jump to content

Ingest code in the header

Go to solution Solved by HadiAlexandre,

Recommended Posts

I want to ingest code in the header, a language selection, but it is not visible in the page. It seems to be hidden under the header, under the Theme or some other element in the page.

I know that you have your own language selector mechanism, but it doesn't fit my interests.

The code I am trying to ingest is:

<!-- Add CSS to style the select element. You can customize the styling to fit your website's design:

css. This I added to the Custom CSS part. -->

#language-select { border: none; font-size: 16px; background-color: transparent; color: #fff; text-transform: uppercase; cursor: pointer; }

<!-- Add JavaScript to handle the language switch. You can use an event listener to detect when the user selects a different language and update the page accordingly. Here's an example using jQuery:

javascript -->

<script>

    $('#language-select').on('change', function() {

        var path = window.location.pathname;

        var page = path.split("/").pop();

        console.log( page );

        var language = $(this).val();

        window.location.href = '/' + language + '/' + page;

    });

</script>

<!-- In this example, the language code is appended to the URL of the current page. You'll need to adjust this code to match the URL structure of your website.

Finally, add the language switcher to your HTML header: -->

         <select id="language-select">

          <option value="en">English</option>

          <option value="fr">Français</option>

          <option value="es">Español</option>

        </select>

<!-- That's it! With these steps, you should be able to create a simple language switcher in your HTML header. -->

 

Link to comment

Have you added this to your website as per the instructions?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I have added that code that I find somewhere to be able to add a language selection that when you select a specific language I will forward the page to /language/pagename, for instances, /pt/orders.

There is a way to inject the code in the header or footer. I did it, but the language selection element is behind the Theme, it is not visible. Probable the Theme element is overlapping my element. There should be a way to integrate my language selection element in the header. Like it happens when I enable the squarespace language selector, it appears in the right part of the header, inside the Theme.

Sorry, If I do not explain very well. Please any doubt, ask me, but imagine you are talking with someone that select squarespace , because I do not have any experience with html and css. 

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.