Customise CTA button colour on mobile menu 7.1

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:

But on mobile, it looks like this:

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:

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

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);
}

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!

Can you remove the CSS that you added for that button. The importants are not letting me mess with it easily.

Okay done, I've removed all CSS for the mobile menu

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

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!

On 7/29/2020 at 11:01 AM, Hjoou said:

Okay done, I've removed all CSS for the mobile menu

 

Have you found the solution yet?

Hey @tuanphan 

 @rwp solved it for me I've pinned his code to the top

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.

Without any fiddling, the subnav looks like this.

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.

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

Try adding to Home > Design > Custom CSS

.header-menu-nav-folder-content {
    justify-content: flex-start;
}

5 hours ago, tuanphan said:

Try adding to Home > Design > Custom CSS

.header-menu-nav-folder-content {
    justify-content: flex-start;
}

 

PERFECT. Your speed and accuracy in this forum is incredible, thank you so much!

I see scroll bar here + text off center.

on Tablet, text (under banner) is a bit narrow. Do you want to fix?

8 hours ago, tuanphan said:

I see scroll bar here + text off center.

on Tablet, text (under banner) is a bit narrow. Do you want to fix?

Yes please! I actually posted a separate question about the off-center text, details here: