Make logo in Mobile Menu consistent page to page

Site URL: https://fennel-hawk-fwg3.squarespace.com/about-us

https://fennel-hawk-fwg3.squarespace.com/about-us / tails2021

When viewing on mobile, when you click the mobile menu, the logo in there reflects whatever file is being used on that particular page. So on the about us page, it looks fine- it is using the image I would like to. But if I access the mobile menu from the home page, it using the logo from that page, which is a white version and does not work against the white background of the mobile menu.

Is there a way to set the logo in the mobile menu as a global element? To always appear at the gif as seen on the about us page?

Thank you in advance!

17 hours ago, lulu.lindberg said:

Site URL: https://fennel-hawk-fwg3.squarespace.com/about-us

https://fennel-hawk-fwg3.squarespace.com/about-us / tails2021

When viewing on mobile, when you click the mobile menu, the logo in there reflects whatever file is being used on that particular page. So on the about us page, it looks fine- it is using the image I would like to. But if I access the mobile menu from the home page, it using the logo from that page, which is a white version and does not work against the white background of the mobile menu.

Is there a way to set the logo in the mobile menu as a global element? To always appear at the gif as seen on the about us page?

Thank you in advance!

 

The background-image in logo is set independently only on the about us Page.

You can apply this style globally on your site by the following code in Home > Design > Custom Css

.header-title-logo a {
  background-image: url(https://static1.squarespace.com/static/61391770f7248329cb20a775/t/617ad0b49c5d592cf5a4f2e0/1635438772566/TAILS-logo-alt.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.header-title-logo img {
  visibility: hidden;
}
#header {
  background: #fff;
}

#header.shrink a {
  color: #311f02;
}

Hope it can help you

Let me know how it works on you site.

Support me by pressing 👍 if this useful for you

7 hours ago, bangank36 said:

The background-image in logo is set independently only on the about us Page.

You can apply this style globally on your site by the following code in Home > Design > Custom Css

.header-title-logo a {
  background-image: url(https://static1.squarespace.com/static/61391770f7248329cb20a775/t/617ad0b49c5d592cf5a4f2e0/1635438772566/TAILS-logo-alt.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.header-title-logo img {
  visibility: hidden;
}
#header {
  background: #fff;
}

#header.shrink a {
  color: #311f02;
}

Hope it can help you

Let me know how it works on you site.

Support me by pressing 👍 if this useful for you

@bangank36 Hmm... this changes the logo across the site on desktop to be the gif.

Let me see if I can explore more clearly.

I want to leave the logo as is set, except for when you access the mobile menu.

See the screenshot - the logo isn't visible because its picking up the setting on that particular page (where the logo is in white). I'd like the logo in that mobile menu to always be the gif, despite how any particular page is set.

@lulu.lindberg You can wrap above code in media query, it will be like this

@media screen and (max-width:991px) {
.header-title-logo a {
  background-image: url(https://static1.squarespace.com/static/61391770f7248329cb20a775/t/617ad0b49c5d592cf5a4f2e0/1635438772566/TAILS-logo-alt.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.header-title-logo img {
  visibility: hidden;
}
#header {
  background: #fff;
}

#header.shrink a {
  color: #311f02;
}
}

On 11/2/2021 at 3:42 AM, tuanphan said:

@lulu.lindberg You can wrap above code in media query, it will be like this

@media screen and (max-width:991px) {
.header-title-logo a {
  background-image: url(https://static1.squarespace.com/static/61391770f7248329cb20a775/t/617ad0b49c5d592cf5a4f2e0/1635438772566/TAILS-logo-alt.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.header-title-logo img {
  visibility: hidden;
}
#header {
  background: #fff;
}

#header.shrink a {
  color: #311f02;
}
}

 

@tuanphan Hmm... This still changes the logo on the pages not JUST on mobile, when you click the hamburger menu icon into the mobile menu. I want the logos to stay as set, EXCEPT for when you are entered into this state (screenshot two- the logo is not visible because, on that page it is set to white)

On 11/10/2021 at 10:16 PM, lulu.lindberg said:

@tuanphan Hmm... This still changes the logo on the pages not JUST on mobile, when you click the hamburger menu icon into the mobile menu. I want the logos to stay as set, EXCEPT for when you are entered into this state (screenshot two- the logo is not visible because, on that page it is set to white)

 

try this new code

@media screen and (max-width:991px) {
body:not(.header--menu-open) .header-title-logo a {
  background-image: url(https://static1.squarespace.com/static/61391770f7248329cb20a775/t/617ad0b49c5d592cf5a4f2e0/1635438772566/TAILS-logo-alt.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
body:not(.header--menu-open) .header-title-logo img {
  visibility: hidden;
}
#header {
  background: #fff;
}

#header.shrink a {
  color: #311f02;
}
}