EmilyLewis

That's great thank you! I've tweaked the code to include background no repeat , so the full code is 

 
body[class*="type-events"].view-item .header-title {
    background-image:url("https://static1.squarespace.com/static/671fa60d0892fd2e6f53fe81/t/67329c73e62cbb4d5bb01613/1731370099107/Logo+Gold.png");
    background-size: contain;
    background-repeat: no-repeat;
}

body[class*="type-events"].view-item .header-title img{
    opacity: 0;
}

Managed to do it with code without buying the plugin
@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 70%;
    left: 6%;
    padding: 0 !important;
    transform: translateY(-50%);
}
.header-nav-wrapper {
  text-align:left;
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.1;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 4vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section.page-section {
    max-width: 75%;
    margin-left: 25%;
    padding-top: 0 !important;
}
}
 

Hey, when you clicked onto Facebook, it didn't open to your page, it opened Facebook in general, you just happen to be logged in, so I wouldn't worry about this. 
There is a Facebook Pixel (ID: 1442369376538770) on the website which might be the reason for it showing up but not entirely sure. 
Hope that helps!
 

Hey, yes I played around with it for a few hours. This is what I've managed to do in the end, but let me know if there would have been a more efficient CSS to get the same results. 
 
//Project overlay - desktop only//
@media screen and (min-width: 640px){
//Hover background colour overlay on image//
.blog-image-wrapper {
  background-color: #46363c;
}
.hentry:hover .image-wrapper {
    opacity: 0.5;
}

//Hover text overlay on image//
.blog-item-summary {
opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.hentry:hover .blog-item-summary {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.hentry:hover .blog-title {
color: #FFFFFF;
}

//Hover read more link text and underline change//
.hentry:hover .blog-more-link {
color: #FFFFFF;
}

.hentry:hover .blog-more-link:before { 
border-bottom: 1px solid #ffffff
}
}