Jump to content

Changing Font Size on Nav Bar Button

Go to solution Solved by Square_Ace,

Recommended Posts

Posted

Hiya! Hoping someone will be able to help me...

How can I change the text size on the red nav bar button, pictured? I'd like both the button and the text to be bigger.

 

Do I insert some code here? Thanks in advance!

Screen Shot 2024-10-12 at 12.04.11 am.png

Screen Shot 2024-10-12 at 12.04.22 am.png

  • Replies 2
  • Views 408
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
Posted

Hi yes, you need to add this code:

#siteWrapper #header .header-actions-action--cta .sqs-button-element--primary {
  font-size: 20px;
  padding: 20px;
}

Change the pixel values as you wish.  If you want the padding to have different vertical/horizontal padding then use padding: 10px 20px; which will make the padding 10px top and bottom and 20px on the sides.

This is a simplified way of doing this. A more complex solution would use different sizes for different screen sizes and a dynamic font size rather than a fixed pixel value.

Hope that helps.

Andrew
Square Ace

Square Ace

Enhancing Squarespace websites for over a decade. I am an expert in writing custom code for the Squarespace platform.
Tailor-made, reusable solutions to your problems, whether it's styling, layout or functionality.
Maverick Squarespace Designers, I'll be your Goose. If your tools are holding back your creative vision, maybe I can help.
I also build useful plugins for Squarespace (with some really positive reviews) including the popular high-quality video background plugin.

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.