Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2906643
color gradient border
Closed

Comments

  • bakab started the conversation
    November 1, 2021 at 7:44am

    https://prnt.sc/1y1a778

    Website: https://trashexpert.ru/

    Hello, on this site, how do we make a color transition border as in the header area. Soledad theme is also used on this site.

  •  2,702
    PenciDesign replied
    November 1, 2021 at 7:51am

    Hi,

    You can add more of this code to Customize > Custom CSS to do that:

    #navigation-sticky-wrapper{
    overflow: hidden;
}
#navigation-sticky-wrapper:after {
    content: '';
    width: 3000px;
    height: 4px;
    opacity: 0.6;
    animation: rotate 3s infinite linear;
    background: linear-gradient(to right,#30ff90 0,#ed2ded 25%,#ff7600 50%,#30ffe6 75%,#30ff90 100%);
    position: absolute;
    bottom: 0;
}

    Best Regards,

    PenciDesign

  • bakab replied
    November 1, 2021 at 8:00am

    Thank you very much, 

    there is only a small problem, there is an automatic ad, it is under the ad in the header.

    https://prnt.sc/1y1bzgv

  •  2,702
    PenciDesign replied
    November 1, 2021 at 8:01am

    Hi,

    Please try to replace the code I sent to this code and check it again:

    #navigation-sticky-wrapper{
    overflow: hidden;
    position: relative;
}
#navigation-sticky-wrapper:after {
    content: '';
    width: 3000px;
    height: 4px;
    opacity: 0.6;
    animation: rotate 3s infinite linear;
    background: linear-gradient(to right,#30ff90 0,#ed2ded 25%,#ff7600 50%,#30ffe6 75%,#30ff90 100%);
    position: absolute;
    bottom: 0;
}

    Best Regards,

    PenciDesign

  • bakab replied
    November 1, 2021 at 8:02am

    animation not working

  •  2,702
    PenciDesign replied
    November 1, 2021 at 8:12am

    Hi,

    Ahh, I forgot to add the transform name, please replace the code I sent to this code:

    #navigation-sticky-wrapper{
    overflow: hidden;
    position: relative;
}
#navigation-sticky-wrapper:after {
    content: '';
    width: 3000px;
    height: 4px;
    opacity: 0.6;
    animation: customrotate 3s infinite linear;
    background: linear-gradient(to right,#30ff90 0,#ed2ded 25%,#ff7600 50%,#30ffe6 75%,#30ff90 100%);
    position: absolute;
    bottom: 0;
}
@keyframes customrotate{from{background-position:-3000px}to{background-position:0}}

    Best Regards,

    PenciDesign

  • bakab replied
    November 1, 2021 at 8:17am

    I am very happy to use the theme of a nice team like you, you help with everything and do your best. thank you very much.

  •   PenciDesign replied privately
  •   bakab replied privately
  •   PenciDesign replied privately
  • bakab replied
    November 22, 2021 at 1:05pm

    hi,

    I created a new header with Header Builder, but this time the following css does not work

    #navigation-sticky-wrapper{
    overflow: hidden;
    position: relative;
}
#navigation-sticky-wrapper:after {
    content: '';
    width: 3000px;
    height: 4px;
    opacity: 0.6;
    animation: customrotate 3s infinite linear;
    background: linear-gradient(to right,#30ff90 0,#ed2ded 25%,#ff7600 50%,#30ffe6 75%,#30ff90 100%);
    position: absolute;
    bottom: 0;
}
@keyframes customrotate{from{background-position:-3000px}to{background-position:0}}
  •  3,002
    PenciDesign replied
    November 22, 2021 at 1:14pm

    Hi,

    The header builder doesn't use this sticky method, so your code will doesn't work.

    Please try to replace it with this code:

    .penci_builder_sticky_header_desktop:after {
    content: '';
    width: 3000px;
    height: 4px;
    opacity: 0.6;
    animation: customrotate 3s infinite linear;
    background: linear-gradient(to right,#30ff90 0,#ed2ded 25%,#ff7600 50%,#30ffe6 75%,#30ff90 100%);
    position: absolute;
    bottom: 0;
}
@keyframes customrotate{from{background-position:-3000px}to{background-position:0}}

    Regards,
    PenciDesign.