Jump to content

Wells: Secondary Navigation on Mobile View

Go to solution Solved by tunglmyrkvi,

Recommended Posts

  • Replies 10
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.

Link to comment
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 ? 

Link to comment
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 :) 

Link to comment
#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 :) 

Link to comment
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;
}

 

Link to comment

Create an account or sign in to comment

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


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