Jump to content

7.1 Mobile Menu Link Colors

Recommended Posts

Site URL: https://photoguy.com

Hello.

Can anyone help with the CSS for changing the colors of the mobile menu active, hover, etc. I'm trying to make the experience consistent with desktop vs mobile versions of site. I like to show links as blue, the page your on as black and pages you hover over as green. Can anyone help with this please?

Screen Shot 2020-06-24 at 23.27.41.png

Link to comment
  • Replies 11
  • Views 3.7k
  • Created
  • Last Reply
  • 3 months later...
2 hours ago, mehruss said:

Site URL: https://www.artslosaltos.org/

I'm trying to change the Menu Dropdown Color for the Header and Background for Mobile Only. My theme is Lusaka and I've tried to inject custom css but it doesn't seem to be working. Currently, the Menu Header and Page for Mobile is White and I'd like to change it to Black or Orange. 

Thanks in advance. 

Add to Home > Design > Custom CSS

.header--menu-open .header-menu-bg.theme-bg--primary {
    background: orange !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

@tuanphan @paul2009

I have a similar question.

on www.taylorholisticvet.ca

I have used this code and the ONLY part working is the colour of the menu items

rollover (active) colour NOT working **actually it looks like the active colour is working... it's the black colour I'd like to change so need the language (css) to target that please**

'X' to close menu colour NOT working.

Not sure what is wrong in the code. Can you or someone else help?

//mobile font colors//
.header--menu-open a{color:#92a5aa!important}
.header--menu-nav-item-active a{color:#7bb6b1!important;}

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

also, and this would be a bonus. the full menu doesn't show on my new iPhone SE. I have to scroll to see it. Does this have something to do with the scroll back option I have set for the site? Or does that not work when the menu is open? Any insight would be helpful here.

1880424344_ScreenShot2020-10-21at9_40_51AM.jpg.376e193292f2af57896f859c2553099a.jpg

Link to comment
On 10/21/2020 at 11:43 PM, jaisequoia said:

@tuanphan @paul2009

I have a similar question.

on www.taylorholisticvet.ca

I have used this code and the ONLY part working is the colour of the menu items

rollover (active) colour NOT working **actually it looks like the active colour is working... it's the black colour I'd like to change so need the language (css) to target that please**

'X' to close menu colour NOT working.

Not sure what is wrong in the code. Can you or someone else help?


//mobile font colors//
.header--menu-open a{color:#92a5aa!important}
.header--menu-nav-item-active a{color:#7bb6b1!important;}

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

also, and this would be a bonus. the full menu doesn't show on my new iPhone SE. I have to scroll to see it. Does this have something to do with the scroll back option I have set for the site? Or does that not work when the menu is open? Any insight would be helpful here.

 

SS changed burger html tag

.burger-inner>div {
    background: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.