Jump to content

Plugin causing standard CSS fixes to break. Any ideas?

Recommended Posts

Hi there,

Recently embedded plugin for mobile slideout on desktop. Couple of things that I'm hoping someone can help with: 

Issue #1. The client logo on overlay is disappearing when hamburger menu kicks-in, because of logo colourway. We've added this code, which we usually use to change logo on mobile menu but it's causing a conflict with plugin code, and makes the logo disappear on the homepage of the site, when mobile menu isn't active. Any ideas ?

<style>
  /* hide current image */
.header-title-logo img {
    visibility: hidden;
}
  /* set new image on burger menu click */
  body.header--menu-open .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/5e8a138dedf9386b7757061f/t/5fc8e19e90a4f8549d839be0/1607000480214/%5BSITE%5D+%23FF_MASTER-LOGO_WHITE.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

Issue #2. Similarly, we want to remove the 'Kitchen & Bathrooms' line (that appears top right of site, when viewed on mobile), using this CSS code below. But it's causing the plugin to break, resulting in hamburger not showing and just a list of site pages to appear...

@media only screen and (max-width: 768px) {.header-title:after {
  content: 'Kitchens & Bathrooms'; {display: none;}
}

Any help on both would be gratefully received. Many thanks in advance. 

Best,
Marc

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

27 minutes ago, MarcUK1603 said:

Hi there,

Recently embedded plugin for mobile slideout on desktop. Couple of things that I'm hoping someone can help with: 

Issue #1. The client logo on overlay is disappearing when hamburger menu kicks-in, because of logo colourway. We've added this code, which we usually use to change logo on mobile menu but it's causing a conflict with plugin code, and makes the logo disappear on the homepage of the site, when mobile menu isn't active. Any ideas ?

<style>
  /* hide current image */
.header-title-logo img {
    visibility: hidden;
}
  /* set new image on burger menu click */
  body.header--menu-open .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/5e8a138dedf9386b7757061f/t/5fc8e19e90a4f8549d839be0/1607000480214/%5BSITE%5D+%23FF_MASTER-LOGO_WHITE.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

Issue #2. Similarly, we want to remove the 'Kitchen & Bathrooms' line (that appears top right of site, when viewed on mobile), using this CSS code below. But it's causing the plugin to break, resulting in hamburger not showing and just a list of site pages to appear...

@media only screen and (max-width: 768px) {.header-title:after {
  content: 'Kitchens & Bathrooms'; {display: none;}
}

Any help on both would be gratefully received. Many thanks in advance. 

Best,
Marc

Can you share your site with the protected password so we can check your issue?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.