Add Event Page Title to Navigation

websitebuilder12345 · February 21

@tuanphan DESKTOP ONLY: I would like to move the event title into the navigation, and move everything below it up. Attached are two screenshots - one how it currently looks, and one how I want it to look. Any help much appreciated! Thank you.

tuanphan · February 24

Yes. If you share link to an event, we can help easier

websitebuilder12345 · February 25

@tuanphan Thank you. https://www.singingwithnightingales.co.uk/event/11-april-2024-sussex-ywd83-fmsbr

tuanphan · February 26

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>

websitebuilder12345 · February 26

@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?

tuanphan · February 29

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?

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

websitebuilder12345 · February 29

@tuanphan My apologies! Code re-added 🙂

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

Edited February 29 by websitebuilder12345

tuanphan · March 2

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?

websitebuilder12345 · March 4

@tuanphan It breaks below a browser width of 1050px.

tuanphan · March 5

On 2/25/2024 at 9:22 AM, websitebuilder12345 said:

@tuanphan Thank you. https://www.singingwithnightingales.co.uk/event/11-april-2024-sussex-ywd83-fmsbr

Page url doesn't work. Can you check it again?

websitebuilder12345 · March 5

Ah sorry! Please try: https://www.singingwithnightingales.co.uk/event/swn-26-april-2024-sussex

tuanphan · March 8

On 3/5/2024 at 4:56 PM, websitebuilder12345 said:

Ah sorry! Please try: https://www.singingwithnightingales.co.uk/event/swn-26-april-2024-sussex

Did you solve? It tried but it looks fine

websitebuilder12345 · March 8

@tuanphan Yes I managed to center the text. Thanks for all your help with this thread!

Add Event Page Title to Navigation

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources