Jump to content

Change Navigation Font Size

Recommended Posts

Hi all,

I remember in the old Squarespace you had Primary and Secondary navigation, and the secondary navigation font size would be independent of the primary. I was wondering if it's possible to target particular pages in the navigation bar and adjust the font size? Bonus points for being able to also adjust the padding of those pages in the navigation to create an indent.

My website is https://www.simpledwelling.net and I've coded my desktop navigation to use mobile.

Screen Shot 2023-03-17 at 12.54.42 pm.png

Link to comment
16 hours ago, tuanphan said:

Hi,

You want to change Menu item sizes for Desktop

or you want to change a specific item? If yes, which items?

I want to change specific items, such as 'Submission', 'Create for Simple Dwelling', 'Advertise' and 'Contact'. I want to make these navigation items smaller, for both desktop and mobile.

Link to comment
On 3/20/2023 at 8:38 AM, anthonyrichardson said:

I want to change specific items, such as 'Submission', 'Create for Simple Dwelling', 'Advertise' and 'Contact'. I want to make these navigation items smaller, for both desktop and mobile.

Add to Design > Custom CSS

/* Nav size */
.header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+4) * {
    font-size: 12px;
}

 

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
  • 7 months later...
On 3/21/2023 at 7:09 PM, tuanphan said:

Add to Design > Custom CSS

/* Nav size */
.header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+4) * {
    font-size: 12px;
}

 

This code worked for a while but has since stopped, and now every nav link is the same size. Is there something I need to add to the code if I shuffle my navigation around/add or remove links?

Link to comment
45 minutes ago, anthonyrichardson said:

This code worked for a while but has since stopped, and now every nav link is the same size. Is there something I need to add to the code if I shuffle my navigation around/add or remove links?

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS. You can change the size value 14px to as you want

.header-menu-nav-wrapper{
  [href="/submissions"], [href="/advertise"], [href="/contact"] {
    font-size: 14px !important;
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
7 minutes ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS. You can change the size value 14px to as you want

.header-menu-nav-wrapper{
  [href="/submissions"], [href="/advertise"], [href="/contact"] {
    font-size: 14px !important;
  }
}

 

That has worked great! However, when I go to add [href="/simple edition"] it doesn't work. Any reason why that might be?

Link to comment
1 minute ago, anthonyrichardson said:

That has worked great! However, when I go to add [href="/simple edition"] it doesn't work. Any reason why that might be?

Can I see how did you add it?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
On 10/23/2023 at 5:39 AM, anthonyrichardson said:

.header-menu-nav-wrapper{
  [href="/simple edition"], [href="/submissions"], [href="/advertise"], [href="/contact"] {
    font-size: 14px !important;
    line-height: 15px !important;
    margin-left: 15px !important;
  }
}

 [href="/simple edition"] to [href="/simple-edition"]

Screenshot_330.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.