Jump to content

Resize badge in Custom CSS

Recommended Posts

Site URL: https://www.bonomomusic.com

Hi all,

I've added a badge to my navigation bar at the top of my page. The code is located in Design -> Custom CSS. 

Thing is, the badge appears too small (see attached pic). I would like to enlarge it but I'm not sure how to go about doing that. I'm not a coder, and I simply copy and pasted the code from the website I got it from.

Can anyone help out with this? Thanks!

Screen Shot 2020-09-24 at 11.03.59.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

3 minutes ago, rwp said:

.Header-nav-inner a:last-of-type {
    line-height: 5em;


Hi, sorry but not sure what to make of this.

I found something similar in my code. Can you please tell me where to insert your code into it?


a.Header-nav-item[href*="soundbetter"] {
    background-image: url(https://d2p6ecj15pyavq.cloudfront.net/assets/SoundBetterBadge-1bc672131a12c38bd822195fbe5d0e17.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;

Link to comment
On 9/24/2020 at 7:32 PM, BerlinGoodMan said:

OMG awesome! Totally works, thanks!

 But how can I adjust the size of the badge specifically? Changing 'xem' adjusts the width of the navigation bar. 

I think I answered your email. If it works, you can share it here for other members.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.