add a pill button to navigation in custom css

[Chantelrudden]

i would like to add a pill shaped button to the navigation, orange #E1AA4F button with white writing that says Fun Stuff.

i would like it in the custom css section so that when i need to update my store, it will stay in place

https://acorncanyon.com/

pass: daplau

[Huptech-Web]

Hi @Chantelrudden
Add below CSS to styles-base.css

.site-header__link-copy.motion-reduce:hover {
  background-color: #e1aa4f;
  padding: 10px;
  border-radius: 20px;
  color: #fff;
}

[theycallmemakka]

Hi @Chantelrudden ,

You can add a button in the navigation bar by adding a navication item from “Online Store > Navigation”. Once you add “Fun Stuff”, please let me know and i will provide a custom CSS to make them orange #E1AA4F button with white writing

[Chantelrudden]

I absolutely love this and will implement this ! but im looking for a pillow button at the end of my navigation before the basket, the sign up will go to the page “fun stuff”

should look like this

[Chantelrudden]

done, changed it to sign up

[theycallmemakka]

Hi @Chantelrudden

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code just above tag

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[GutterGuard]

Hey there! I’m trying your code, but using the Debut theme. Which I’m currently upgrading to Shopify 2.0 via a github theme update.

I previously updated it in my theme at some point, but can’t seem to find where the code is a did a few years back.

I updated to the following code:

span.site-nav__label {
font-weight: 600;
font-size: 22px;
}
span.site-nav__label:last-child {
background-color: #e1aa4f;
border-radius: 20px;
color: #fff!important;
padding: 0px 10px;
}

span.site-nav__label:last-child a {
color: #fff!important;
}

span.site-nav__label:last-child .site-header__link-copy:after{
content: unset;
}

But it’s appearing like the attached.