Jump to content

Add Event Page Title to Navigation

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 12
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    var EventItemTitle = $('.eventitem-title').text();
    $('.header-nav').append('<span>'+EventItemTitle+'<span>');
  });</script>
<style>
  div.header-nav>span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #ebdec4;
    text-transform: uppercase;
    font-size: 2.2em;
}
h1.eventitem-title {
    display: none;
}
</style>

image.thumb.png.7ae038eb5ae846eaf0c216a9e1784f4e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/26/2024 at 3:33 PM, websitebuilder12345 said:

@tuanphan Thank you so much! Working very well, but just one small issue:

When I resize the browser window, the title shifts to the right. Can you help me tweak the code so that the text is centered and the title stays center aligned?

Screenshot 2024-02-26 at 15.30.49.png

Can you add the code? Currently I can't add code from my browser

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/29/2024 at 3:45 PM, websitebuilder12345 said:

@tuanphan My apologies! Code re-added 🙂

FYI I tweaked the code so it only works on desktop.

It looks like you figured it out. I tried resize browser but all are fine

Which screen size do you see problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.