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
  • Views 562
  • Created
  • Last Reply
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


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.