Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mobile Information Bar - hide icon and increase font size


PartTwoDesign

Question

Site URL: https://sunflower-accordion-z2d3.squarespace.com/

I currently have the below code in Custom CSS:

// Floating Mobile Info Bar //
.sqs-mobile-info-bar {
  background-color: #e33c31 !important;
  border-radius: 100px;
  margin: 5%;
  width: 90%;
}

I've attached a visual of how this appears on mobile and how I'd like to change it i.e. hide the icon, increase the font, make the bar narrower but centred on the screen. 

Thanks in advance for any advice.

 

mobile bar.png

Link to comment

9 answers to this question

Recommended Posts

  • 0
On 9/6/2021 at 4:29 PM, PartTwoDesign said:

Hi @tuanphanyes the mobile info bar is enabled 🙂

Thanks

Anna 

Add to Design > Custom CSS

/* Mobile Info bar */
span.sqs-mobile-info-bar-trigger-icon {
    display: none;
}
span.sqs-mobile-info-bar-trigger-label {
    font-size: 30px;
    font-weight: bold;
}

 

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
  • 0

This was exactly what I was looking for. Thank you so much! I need one adjustment. My client still wants both EMAIL and CALL and I'm having trouble getting them to be spaced apart far enough for good usability.

It has something to do with the width code. This is what I added to the CSS:

.sqs-mobile-info-bar-trigger {
cursor: pointer;
display: inline-block;
padding: 15px 0;
text-align: center;
width: 45% !important;
}

But, this is what shows up when I inspect. The 45% isn't working.

image.png.74da00f9456420c85eb545949f3ff0a4.png

 

When I tested the CSS is a validator I got this error message.

image.png.6947244a876cda059f7656b127be3a11.png

 

I'm going for the look on the left and I have what's on the right.image.png.4664c8127883cda1b975490bae0dd858.png

Any advice?
Thanks!

Link to comment
  • 0
On 5/19/2022 at 5:29 AM, nwhittlesey said:

This was exactly what I was looking for. Thank you so much! I need one adjustment. My client still wants both EMAIL and CALL and I'm having trouble getting them to be spaced apart far enough for good usability.

It has something to do with the width code. This is what I added to the CSS:

.sqs-mobile-info-bar-trigger {
cursor: pointer;
display: inline-block;
padding: 15px 0;
text-align: center;
width: 45% !important;
}

But, this is what shows up when I inspect. The 45% isn't working.

image.png.74da00f9456420c85eb545949f3ff0a4.png

 

When I tested the CSS is a validator I got this error message.

image.png.6947244a876cda059f7656b127be3a11.png

 

I'm going for the look on the left and I have what's on the right.image.png.4664c8127883cda1b975490bae0dd858.png

Any advice?
Thanks!

What is site url? above site, it looks like he disabled mobile bar.

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
  • 0

Sorry, I'm just seeing this now. The website is supercubes.com. My code is:

/* Mobile Info bar */
.sqs-mobile-info-bar-trigger {
       cursor: pointer;
       display: inline-block;
      padding-top: 15px;
       padding-bottom: 15px;
    text-align: center;
       width: 45% !important;}
.sqs-mobile-info-bar {
      background: #FF3333 !important;
    margin-left: 8%;
    margin-right: 8%;
    margin-bottom: 10%;
    width: 84%!important;
    box-shadow: rgba(0, 0, 0, 0.35)     0px 5px 15px;}
span.sqs-mobile-info-bar-trigger-icon {
    display: none;}
span.sqs-mobile-info-bar-trigger-label {
    font-size: 18px;
    font-weight: 500;}
/* END Mobile Info bar */

Link to comment
  • 0
4 hours ago, nwhittlesey said:

I just checked the CSS validator again and it checks out. Can't figure out why it's not working.

Use this CSS

.sqs-mobile-info-bar-triggers>div:first-child {
    float: left;
}
.sqs-mobile-info-bar-triggers>div:last-child {
    float: right;
}

 

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