Change Button Color in Mobile Nav

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!

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
}

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

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

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

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

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

It is fine here. Did you solve it?

On 10/15/2022 at 3:43 AM, tuanphan said:

It is fine here. Did you solve it?

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!

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!

 

Add to Design > Custom CSS

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

11 hours ago, tuanphan said:

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

That solved that! THANK YOOOOU @tuanphan!