How can I create rounded buttons for my menu items?

Store Design
, ,
1

Calling all customization experts!

Hello everyone!

I can add secondary menus to any page by adding Custom Liquid section and pasting code like this:

{% for link in linklists.products-menu.links -%}
{{ link.title | link_to: link.url }}
{%- endfor %}

Where products-menu is a menu I created for that purpose and it works perfectly fine, but how do I make it fancy? Some kind of rounded buttons would be nice.

You can see 4 links in that menu here: https://cosdebahacanada.myshopify.com/collections/all

password is zxcvbn

I’ve tried the code below, but although it looks alright actual links stop working at that point

2

@Tipada - try this code

.sub-nav a {
    border-radius: 15px;    border: 2px solid #73AD21;
    text-align: center;    margin: 0px 4px;    cursor: pointer;
    background-color: #73ad21;    text-decoration: none;
    padding: 5px;    color: #fff;
}

suyash1_0-1670171502338.png
suyash1_0-1670171502338.png1366×768 167 KB

3

Sweet! Thank you, had to modify it a bit, below is the final code

BUT for some reason when this is added Filters break in the section below

https://cosdebahacanada.myshopify.com/collections/serums

broken filters.png
broken filters.png1260×463 93.4 KB

Do you see what could be causing that?

    {% for link in linklists.products-menu.links %}

    <class=“menubuttons”> <a href=“{{ link.url }}” {{ link.title }}

    .menubuttons{ display: flex; justify-content: center; } .menubuttons a { border-radius: 15px; border: 2px solid #73AD21; text-align: center; margin: 0px 4px; cursor: pointer; background-color: #73ad21; text-decoration: none; padding: 5px; color: #ffffff; }

    {% endfor %}