Set gradient color border around active page on navigation bar and around certain form buttons

[luis-zadel]

Hello

Not sure if Shopify Design or Shopify Discussions is the most appropriate section so posting here in Shopify Design.

We want to have the Navigation menu element for the currently selected page to have a colored border around it, preferable a gradient pattern like linear-gradient(90deg, rgba(43,255,135,1) 0%, rgba(142,194,190,1) 50%, rgba(255,157,226,1) 100%).

Additionally though it might be a slightly different solution from the Nav menu part we also want certain buttons on our forms to have the  same gradient pattern for the border. For instance, though not the perfect example, in the following screenshot, have the Store Navigation element highlited with the aforementioned border as well as the Buy it now button.

I have unsuccessfully played with some CSS, though I'm no CSS expert as you can see. In the case of the form button I managed to change both the caption and the border color with the color attribute, but I want only the border to have the gradient pattern. I still want to change the caption color most likely to black.

With the Navigation menu I toyed with the following CSS which places a black border around all menu elements, not just the one for the current page, however I couldent set the border-color to the gradient.

a.site-nav__link.site-nav__link--underline {
    border: solid;
    border-color: black;
    border-radius: 15%;
}

Here is an image representation ( not coded, just an image for conext ) of more or less what we are looking for:

You can find the site at https://mmpluss.com/. The theme weare using is Effortless theme.

Appretiate any help you can provide us.

[oscprofessional]

Hello @luis-zadel 

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

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

li.site-nav__item.site-nav__expanded-item:first-child {
    background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, darkblue, darkorchid) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
}
input.button.primary_btn.add-to-cart-btn {
    background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, darkblue, darkorchid) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
    color: #000;
}

[luis-zadel]

Thank you for your answer, however the code sets the border on the first element, which was the case for the example in the picture, but instead I nead it for the active element, for example if I'm in the Who we are page it would be the Who we are nav element.