Solved

Make this navigation word into a button design

arivon
Excursionist
26 0 5

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

arivon_1-1715746452611.png


Look like this (a button with background colour)

arivon_0-1715746343216.png

Can you help me with css ¿?

Accepted Solution (1)

tim
Shopify Expert
3466 280 1286

This is an 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:

Screenshot 2024-05-15 at 2.20.57 pm.png 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 5 (5)

PageFly-Richard
Shopify Partner
4287 973 1627

 

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>

PageFlyRichard_0-1715746902853.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

tim
Shopify Expert
3466 280 1286

This is an 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:

Screenshot 2024-05-15 at 2.20.57 pm.png 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
arivon
Excursionist
26 0 5

This works! thank you very much

ZestardTech
Shopify Expert
5474 984 1309

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

 

 

 

ZestardTech_0-1715749637980.png

ZestardTech_1-1715749903289.png

 

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

iCart_App
Shopify Partner
519 58 106

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

 

iCart Cart Drawer Cart Upsell App


- If you find the solution helpful, please accept and like it
- To learn more visit www.identixweb.com