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

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


Go to solution Solved by tuanphan,

Question

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

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 1
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

Link to post
  • 0

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 post
  • 0
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

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