Jump to content

How can I change my Mobile Menu Login Font to be the same as my Uploaded Font?

Recommended Posts

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Hello I have uploaded my font to use on my site via Design / Custom CSS / Manage Custom Files I'm using this code to use this font as my extra large H1 style:

 

.header--menu-open .header-menu-nav-item {text-align:left;}

.header--menu-open .header-menu-nav-item {margin-bottom:15px}

.header--menu-open .header-menu-nav-folder-content {justify-content:normal}

.header--menu-open .header-menu-nav-item {font-family:SCHOLAR-SAYZE-SANS}

.header-menu-nav-item a {font-size: 27px;}

.header-menu-nav-folder[data-folder="root"] {

    padding-top: 5vh;

}

 

I notice that on my mobile menu, the 'Login' link is using a different font. How can I get this to use the same 'font-family:SCHOLAR-SAYZE-SANS'? Image as attached.

Page - https://bluebird-porcupine-yzdg.squarespace.com/home

Pword - bluebird

Many thanks,

Best,

Faiz

mobile-menu-font.jpg

Link to comment
  • Replies 6
  • Views 739
  • Created
  • Last Reply

AWESOME! Thanks very much Tuanphan - looks real cool.

I'm starting to learn some code so I can understand what is being applied to the styling. I understand about the command of the font family styling and how to change size, color, letter spacing etc. But how do you identify the actual 'target' of what you want to change, for example in this case 'div.user-accounts-link' *? How do you know what this location is called?

I would be grateful if you could help me understand this. 

Many thanks!

Link to comment
  • 2 weeks later...
On 3/8/2021 at 3:45 PM, scholarsayze said:

AWESOME! Thanks very much Tuanphan - looks real cool.

I'm starting to learn some code so I can understand what is being applied to the styling. I understand about the command of the font family styling and how to change size, color, letter spacing etc. But how do you identify the actual 'target' of what you want to change, for example in this case 'div.user-accounts-link' *? How do you know what this location is called?

I would be grateful if you could help me understand this. 

Many thanks!

Hi, It calls "class or id name"

Hover on elements that you want to check >> Right Click >> Click on Inspect Element >> The code box will appear >> Look at top left corner >> You will see arrow inside square icon >> Click on it >> Hover on elements that you want to check >>> It will show class/id name.

image.thumb.png.8f8020b038a80e834a01da089ac07ef4.png

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
On 3/18/2021 at 3:51 PM, scholarsayze said:

Thank you Tuanphan for the detail explanation. So for my example attached, this class or id name would be 'div.sqs-block-content', is that correct?

Thank you!

CODE.png

Yes. However you should use text block id. Use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

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.