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

7.1 Mobile Menu Link Colors


PH0T0GUY

Question

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

That page doesn't address the Mobile menu. Just main menus without submenus. 

.header--menu-open .header-menu.light-bold .header-menu-nav a { color: #006fcd; } body:not(.tweak-transparent-header) .light-bold .header-menu-nav .header-menu-nav-item--active a { color: #46

Add to Home > Design > Custom CSS .header--menu-open .header-menu-bg.theme-bg--primary { background: orange !important; }  

Posted Images

9 answers to this question

Recommended Posts

  • 0
.header--menu-open .header-menu.light-bold .header-menu-nav a {
    color: #006fcd;
}

body:not(.tweak-transparent-header) .light-bold .header-menu-nav .header-menu-nav-item--active a {
    color: #464645;
}

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

If you change your navigation link colour to the blue you want and then add in this code, it will change the colour of the page you are on to black in mobile

.header-menu-nav-item--active a {
    color: #000000 !important;
}

Link to post
  • 0

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. 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@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

Edited by jaisequoia
Link to post
  • 0
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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