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

How do I add a badge to navigation?


Question

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

Hello,

I would like to add a badge that will lead to my SoundBetter page when clicked. Ideally, I would like to have this next to my navigation on top of every page of my site, so potential clients always see it. Alternatively, I could add it to just one page.

I think I'm supposed mot be looking for something called 'Code Block' but I can't seem to find that.

Do I need a Business Account in order do this? And please let me know if you need me to paste the code in this forum.

Thank you!

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS. Replace with badge image url

a.Header-nav-item[href="/new-page"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

Hi again,

Sorry, I don't get it.

This is the code for the badge I want to add.

How does this work with the code you just sent me?

 

<a href="https://soundbetter.com/profiles/249298-paul-bonomo" rel="noopener noreferrer" target="_blank" title="Paul Bonomo profile on SoundBetter" ><img alt="Paul Bonomo, Keyboards - Synth on SoundBetter" src="https://d2p6ecj15pyavq.cloudfront.net/assets/SoundBetterBadge-1bc672131a12c38bd822195fbe5d0e17.svg" style="max-width: 130px;" /></a>

Link to post
  • 0

Edit "New page" item in navigation > change link to this: https://soundbetter.com/profiles/249298-paul-bonomo

then edit above code to

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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
On 9/24/2020 at 4:08 PM, BerlinGoodMan said:

Hi there,

You asked if I had any other questions, so here goes.

Could you help me with resizing this badge, please? I'd like to make it bigger.

Thanks a lot!

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;
    width: 50px;
    height: 50px;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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