Jump to content

Add logo into mobile header after first scroll

Recommended Posts

The top image of my mobile website includes the company logo, so I have added in code to not display the logo on the home page. However, once you start scrolling, a yellow bar appears at the top with the mobile burger menu in it and looks very empty without a logo there. Is it possible to keep the logo hidden for my top section of the site, but then have it show once you start scrolling down the page again?

Screen Shot 2023-07-25 at 7.33.57 pm.png

Screen Shot 2023-07-25 at 7.33.51 pm.png

Edited by LuckyAndSon
Link to comment
  • Replies 3
  • Views 745
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Add this code to Design > Custom CSS to show logo on scroll

/* Show logo on scroll */
@media screen and (max-width:767px) {
body.homepage .shrink .header-title-logo {
    display: block !important;

If the code doesn't work, please check on live mode or incognito window

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.