Jump to content

Change Button Color in Mobile Nav

Recommended Posts

Site URL: https://thisplusthat.com

Hi hi! Wondering if I could get some help styling the button in my mobile navigation. I have this code currently in my Custom CSS:

/* Custom Mobile Nav CTA Button */
.header-menu-cta a {
font-family: proxima-nova;
font-weight: 700;
font-style: normal;
letter-spacing: .1em !important;
text-transform: uppercase;
line-height: 1.2em !important;
font-size: 1rem;
color: #00CC99 !important;
}

Wanting, though, for the button to be styled like it is on desktop / my primary button styling — teal background (#00CC99) and black text (#333).

Thank youuuu!

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

21 hours ago, brandi_sqspace said:

Site URL: https://thisplusthat.com

Hi hi! Wondering if I could get some help styling the button in my mobile navigation. I have this code currently in my Custom CSS:

/* Custom Mobile Nav CTA Button */
.header-menu-cta a {
font-family: proxima-nova;
font-weight: 700;
font-style: normal;
letter-spacing: .1em !important;
text-transform: uppercase;
line-height: 1.2em !important;
font-size: 1rem;
color: #00CC99 !important;
}

Wanting, though, for the button to be styled like it is on desktop / my primary button styling — teal background (#00CC99) and black text (#333).

Thank youuuu!

You can use mobile break point to only apply the appropriate style

@media only screen and (max-width: 767px) {
  // you style Css on mobile
}

 

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
11 minutes ago, bangank36 said:

You can use mobile break point to only apply the appropriate style

@media only screen and (max-width: 767px) {
  // you style Css on mobile
}

 

Thanks, @bangank36. Forgive my total lack of knowledge here, but what is the CSS code to style the button background? Can I basically copy what I have above, but do it under this media only code, so that it's something like:

@media only screen and (max-width: 767px) {
font-family: proxima-nova;
font-weight: 700;
font-style: normal;
letter-spacing: .1em !important;
text-transform: uppercase;
line-height: 1.2em !important;
font-size: 1rem;
color: #00CC99 !important;  <-- is this the bg color of the button or the font color? why is it not styling teal?
}

 

 

Link to comment

You need to run the selector first then set style for it

@media only screen and (max-width: 767px) {
  your selector {
    // the style for selector
  }
}

For style button, you can get reference from here: https://www.w3schools.com/css/css3_buttons.asp

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

May be you can take some screen of buttons you want to set a specific style so we can take a look

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
57 minutes ago, bangank36 said:

You need to run the selector first then set style for it

@media only screen and (max-width: 767px) {
  your selector {
    // the style for selector
  }
}

For style button, you can get reference from here: https://www.w3schools.com/css/css3_buttons.asp

I don't know what "my selector" is, unfortunately. Here's a screenshot of what I want the button to look like — just like every other button on my site (the one in the top right here).

Screen Shot 2022-10-12 at 10.56.35 AM.png

Link to comment
On 10/12/2022 at 11:57 PM, brandi_sqspace said:

I don't know what "my selector" is, unfortunately. Here's a screenshot of what I want the button to look like — just like every other button on my site (the one in the top right here).

Screen Shot 2022-10-12 at 10.56.35 AM.png

It is fine here. Did you solve it?

image.thumb.png.8f4d83072d0a6e17b17c06f3ffe88e4c.png

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
On 10/15/2022 at 3:43 AM, tuanphan said:

It is fine here. Did you solve it?

image.thumb.png.8f4d83072d0a6e17b17c06f3ffe88e4c.png

No, sorry—this is a screenshot (⬆️) from a page that's my desktop/regular nav menu. I'm just showing an example of somewhere else on my site (desktop/regular nav) that's what I want the button to look like in my mobile overlay nav menu (the black background, here ⬇︎), for your reference, since @bangank36 asked for one!

image.thumb.png.d41386410b0a225705cce36d70203ce4.png

 

Edited by brandi_sqspace
Link to comment
On 10/22/2022 at 11:04 PM, brandi_sqspace said:

No, sorry—this is a screenshot (⬆️) from a page that's my desktop/regular nav menu. I'm just showing an example of somewhere else on my site (desktop/regular nav) that's what I want the button to look like in my mobile overlay nav menu (the black background, here ⬇︎), for your reference, since @bangank36 asked for one!

image.thumb.png.d41386410b0a225705cce36d70203ce4.png

 

Add to Design > Custom CSS

header#header a.theme-btn--primary {
    color: #000 !important;
    background-color: #00cc99 !important;
}

 

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.