Jump to content

Sticky Mobile Information Bar

Recommended Posts

Hi guys

I have a question about the Mobile Information Bar. As you scroll on your phone, this bar disappears. Is there a way to get it sticky and leave it below when you scroll?
I found out that a lot of people just leave the website instead of contacting me. This MIB will help a lot
I hope I described it right?

On my website www.trouwshoot.nl and www.familieshoot.nl I really love yo have this implemented.

 

Greets, Stefan

Link to comment
  • 1 year later...

@brandon This worked really well as well! Although I have a question... I added a custom color to the background of my mobile information bar, but I see that there is a bit of space underneath of the mobile information bar that I'd like to get rid of. 

I added an Image of my mobile information bar below for reference, and circled the white space I'm talking about. That white space is a bit annoying and it only appears when scrolling up the page, when you scroll down the page it's not there.

Here is my client's website for reference: moffittsmermaids.com

IMG_FA7764B21DC9-1.jpeg

Link to comment
7 hours ago, Nondys said:

@brandon This worked really well as well! Although I have a question... I added a custom color to the background of my mobile information bar, but I see that there is a bit of space underneath of the mobile information bar that I'd like to get rid of. 

I added an Image of my mobile information bar below for reference, and circled the white space I'm talking about. That white space is a bit annoying and it only appears when scrolling up the page, when you scroll down the page it's not there.

Here is my client's website for reference: moffittsmermaids.com

IMG_FA7764B21DC9-1.jpeg

Can you check site url?

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
9 hours ago, Nondys said:

I added a custom color to the background of my mobile information bar, but I see that there is a bit of space underneath of the mobile information bar that I'd like to get rid of. 

That's because your CSS is only modifying the top of the mobile bar; that white bar is the bottom of the rest of it. 😂

If you add this, you'll change the colour of the bottom element too:

.Mobile-bar--bottom {
  background-color: #8dbcbf;
}

mobile-info-bar-css-color.thumb.png.6f0d087dce980981b655c5c373b41a8b.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.