Wells: Secondary Navigation on Mobile View

Hi. I'm currently experimenting with the old 7.0 Wells template. Is there a way to change the colour and/or font size of the secondary navigation on mobile view? The changes in the custom settings only seem to apply to desktop view.

Link: https://roadrunner-cymbals-tepd.squarespace.com
Password: epsilon

Hi,
Do you want to change the Hamburger menu opened items?

Please use the link button if it helps you!

Thank you!

I want the secondary navigation to be visually distinct from the primary navigation. On desktop view, I can change the font, font size and colour for each of them, but on mobile view all navigation items look the same. So I'm looking for a way to change the look of the secondary navigation items (smaller font, different colour) on mobile view.

2 minutes ago, tunglmyrkvi said:

I want the secondary navigation to be visually distinct from the primary navigation. On desktop view, I can change the font, font size and colour for each of them, but on mobile view all navigation items look the same. So I'm looking for a way to change the look of the secondary navigation items (smaller font, different colour) on mobile view.

Hi , Did you tried to use CSS for mobile specifically ? 

I'm no CSS expert. I managed to add more space between the primary and secondary items, but I don't know the right code to change the size and colour of "Contact" and "Read me" for mobile.

Just now, tunglmyrkvi said:

I'm no CSS expert. I managed to add more space between the primary and secondary items, but I don't know the right code to change the size and colour of "Contact" and "Read me" for mobile.

No problem at all we are here to help you out , Please wait so we can send you a CSS code to put in the correct place to make things right for mobile and desktop :) 

#mobileNav li.active-link a {
    color: grey !important;
    font-size:16px;
}

Please do go the Design >Custom CSS and paste the above code there , to change the color simply replace grey color with the color you want , for font size change the 16 with some big or small value depending upon size you want.

Please let me know if it helps , it it fixes the problem , don't forget to mark it as solved :) 

Thank you, but that only changed the look of the active link, the secondary items ("Contact" and "Read me") still look the same.

Just now, tunglmyrkvi said:

Thank you, but that only changed the look of the active link, the secondary items ("Contact" and "Read me") still look the same.

Oh yeah , sorry just delete that code and replace it with this one:  I have marked for active and inactive links so it would be easy for you to use.

/*For active Links*/
#mobileNav li.active-link a {
    color: grey !important;
    font-size:16px;
}

/*For inactive Links*/
#mobileNav li a {
    color: grey !important;
    font-size:16px;
}

Thank you, that's helpful. But it changes all items in the menu. Is there a code to change only the last two items? Maybe with an "nth-child()" selector?