Jump to content

Make logo in Mobile Menu consistent page to page

Recommended Posts

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!

 

Edited by lulu.lindberg
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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

Edited by bangank36

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
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.

image.thumb.png.06e6c676385b8cbec35c3f4bac802a40.png

Link to comment

@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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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)

 

image.thumb.png.45f01db3b38d803359eaab80d965c04a.png

image.thumb.png.6495482730a2c4a8d8854134a5098e08.png

Link to comment
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)

 

image.thumb.png.45f01db3b38d803359eaab80d965c04a.png

image.thumb.png.6495482730a2c4a8d8854134a5098e08.png

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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.