Jump to content

Customise CTA button colour on mobile menu 7.1

Recommended Posts

Site URL: https://www.rogerroger.co/

Hi everyone and thank you in advance!

I need help to customize two elements on my mobile menu bar.

I don't have issues on desktop, it looks like this:

1533412726_Screenshot2020-07-24at8_08_06PM.thumb.png.8bc9701d0989ccdcc6774ef678501e06.png

But on mobile, it looks like this:

 2114141973_Screenshot2020-07-24at7_59_38PM.png.2d7b3c8dc878ad6e792e25dfd994a643.png

The close button is black, the CTA button isn't looking like the rest of the site and the CTA  is sitting a little too low for my liking. I'm hoping to get it to look like this mock up:

Screenshot-2020-07-24-at-7_59.38-PM.jpg.9105cdd5cec0bee10b0bf4a2d2fdba17.jpg

Is there any way I can fix it? Thank you for your time! 

Here's what my CSS looks like for the menu now:

 

Quote

/*Mobile menu */

.header--menu-open .header-menu .header-menu-bg{background:#1e1e1e!important}

.header--menu-open .header-menu-nav-item:nth-child(5) a {color:#fcc10c!important}

.header--menu-open a{color:#FFF!important}

.header--menu-open .header-menu .header-menu-cta a{background-color:#FFF;color:#FFF!important}

.header--menu-open .burger-inner:before, .header--menu-open .burger-inner:after{background-color:#FFF!important}

.header-menu-cta {
  background-color: #1e1e1e; 
}

 

 

 

Screenshot-2020-07-24-at-7.59.38-PM.jpg

Link to comment
  • Replies 13
  • Created
  • Last Reply
On 7/24/2020 at 11:52 PM, rwp said:

Looks like you got the button figured out?

This will fix the close button:


.header-burger-btn.burger.burger--active .burger-inner.header-menu-icon-doubleLineHamburger {
    filter: invert(1);
}

 

Thank you so much for replying, I've applied the code for the invert filter and it worked perfectly! thank you. 
Unfortunately I haven't fixed the the CTA button on the mobile version. Would you be able to help me with that still? Thank you for taking the time!

 

Link to comment

Try this

 

/*Mobile menu */

.header--menu-open .header-menu .header-menu-bg {
  background: #1e1e1e !important;
}

.header--menu-open a {
  color:#FFF !important;
}

.header-burger-btn.burger.burger--active .burger-inner.header-menu-icon-doubleLineHamburger {
    filter: invert(1);
}

.theme-btn--primary.btn {
  color: orange !important;
  border-color: orange !important;
}

.header-menu-cta {
  padding-bottom: 15vh !important;
}

 

Link to comment
17 hours ago, rwp said:

Try this

 


/*Mobile menu */

.header--menu-open .header-menu .header-menu-bg {
  background: #1e1e1e !important;
}

.header--menu-open a {
  color:#FFF !important;
}

.header-burger-btn.burger.burger--active .burger-inner.header-menu-icon-doubleLineHamburger {
    filter: invert(1);
}

.theme-btn--primary.btn {
  color: orange !important;
  border-color: orange !important;
}

.header-menu-cta {
  padding-bottom: 15vh !important;
}

 

It’s PERFECT thank you so much!

Link to comment
  • 3 months later...

Thank you @rwp for this code!

For @rwp or anybody else: I customized this code for my site and tried to take it farther by customizing the subnav items. I want to move the subnav items up higher so that when a user clicks a folder, the subnav menu is horizontally aligned with the main nav item. Screenshots to clarify!

My main mobile nav now looks like this.

Screen Shot 2020-11-16 at 12.31.57 AM.png

 

Without any fiddling, the subnav looks like this.

Screen Shot 2020-11-16 at 12.29.13 AM.png

 

With this bit of code...

.header-menu-controls-control {
    margin-top: -30vh;
}

...I was able to move part of the subnav up, as shown in this screenshot.

Screen Shot 2020-11-16 at 12.26.48 AM.png

How do I get the rest of the subnav to move up with it?

URL is https://vibraphone-dove-dpfn.squarespace.com/
PW: He@1ing

Thanks!

Kacia

Link to comment

Archived

This topic is now archived and is closed to further replies.

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