Make this navigation word into a button design

[arivon]

Hello, I want this section of my website: www.paruno.com 

Look like this (a button with background colour)

Can you help me with css ¿?

[PageFly-Richard]

Hi @arivon 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
li.header__linklist-item {
    padding: 12px 0;
}
ul.header__linklist >li:last-child {
    background: pink;
    display: block;
    padding: 12px 24px;
    border-radius: 50px;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[tim · Accepted solution]

You can try adding this CSS code to the "Custom CSS" under "Theme settings":

desktop-navigation [href*="/hot-sale"],  
mobile-navigation [href*="/hot-sale"] {
  outline: 0.5rem solid red;
  border-radius: 1rem;
  background: red;
  color: white;
  padding: 0 1rem;
}

mobile-navigation [href*="/hot-sale"] {
  display: inline;
  margin: 0.5rem;
  line-height: 4rem;
}

may replace red and white with the colours you prefer.

Would look like:

 

[arivon]

This works! thank you very much

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

 .header__linklist-link.link--animated[href="/pages/hot-sale"] {
    background: #1e22aa;
    color: #fff;
    border-radius: 30px;
    padding: 0px 17px;
}
.mobile-nav__link.heading[href="/pages/hot-sale"] {
    background: #1e22aa;
    color: #fff;
    border-radius: 30px;
    padding: 5px 17px;
    max-width:120px;
}

[binal_identix]

Hello @arivon 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->theme.css>add this code at the bottom of the file.

li.header__linklist-item.has-dropdown {
    padding: 3px 0;
}
ul.header__linklist.list--unstyled.hidden-pocket.hidden-lap >li:last-child {
    background: red;
    padding: 6px 16px;
    border-radius: 24px;
}