How do I add a badge to navigation?

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!

add a blank item on Main Navigation, then we can give the code to turn blank item to badge image.

OK done! I've added a plank page to Navigation. Now what?

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

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>

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

OK I got the badge to appear. But where do I add this link?

https://soundbetter.com/profiles/249298-paul-bonomo

You said to edit 'New Page' but the only place I saw to enter a link was URL slug.

"New page" is Page or Link?

If Link item, you can change url

It's a Page.

Please note: I've changed its name to 'SoundBetter Badge'

Hi. It looks like you solved?

let me know if you have any other questions.

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!

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

Hi @tuanphan

I am trying to recreate a sign like this website, check the center of top nav bar with the "new" sign on it.

Can you help me with this? Much appreciated!!

my website: https://travelwithamnet.com/

On 3/3/2022 at 12:08 AM, Nana-nana said:

Hi @tuanphan

I am trying to recreate a sign like this website, check the center of top nav bar with the "new" sign on it.

https://sakura.co/

Can you help me with this? Much appreciated!!

my website: https://travelwithamnet.com/

You mean "New" badge on Sakuraco?

Which items you want to apply on your site?

On 3/5/2022 at 9:07 PM, tuanphan said:

You mean "New" badge on Sakuraco?

Which items you want to apply on your site?

Yes @tuanphan

The page I want to apply to is not listed on the main nav bar yet.

However, the page itself is already published. 
https://travelwithamnet.com/fci-sample

Thanks in advance as always!! 

On 3/9/2022 at 12:13 PM, Nana-nana said:

Yes @tuanphan

The page I want to apply to is not listed on the main nav bar yet.

However, the page itself is already published. 
https://travelwithamnet.com/fci-sample

Thanks in advance as always!! 

Hi @tuanphan,

I changed the slag so I'm just sharing the link below. 

Thanks again!

https://travelwithamnet.com/fly-to-japan-from-home-traditional-and-modern/description

On 3/13/2022 at 12:20 AM, Nana-nana said:

Hi @tuanphan,

I changed the slag so I'm just sharing the link below. 

Thanks again!

https://travelwithamnet.com/fly-to-japan-from-home-traditional-and-modern/description

Which page on header menu do you want to add badge? I don't see sakuraco

This code (Design > Custom CSS) will add a badge to JR Pass

div.header-nav-item:nth-child(2)>a {
    position: relative;
}
div.header-nav-item:nth-child(2)>a:after {
    content: "New";
    position: absolute;
    top: -10px;
    background-color: red;
    color: white;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

On 3/13/2022 at 9:36 PM, tuanphan said:

Which page on header menu do you want to add badge? I don't see sakuraco

This code (Design > Custom CSS) will add a badge to JR Pass

div.header-nav-item:nth-child(2)>a {
    position: relative;
}
div.header-nav-item:nth-child(2)>a:after {
    content: "New";
    position: absolute;
    top: -10px;
    background-color: red;
    color: white;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

 

Thank you so much @tuanphan!!! As always!!