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

Customise CTA button colour on mobile menu 7.1


Hjoou
Go to solution Solved by rwp,

Question

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

Edited by Hjoou
Uploaded the wrong screenshot and fixed my phrasing to make it clearer
Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

13 answers to this question

Recommended Posts

  • 1

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 post
  • 1

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

 

Link to post
  • 0
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 post
  • 0
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 post
  • 0

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

Edited by Kacia
Link to post
  • 0
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!

Link to post
  • 0
8 hours ago, tuanphan said:

I see scroll bar here + text off center.

image.thumb.png.b06cf0d77d61ee984dcc916f7695e2dc.png

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: 

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...