Skip to content
Public Ticket #18507

color gradient border

Conversation thread

PenciDesign Supporter replied

4 years ago
Staff Reply

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.

bakab replied

4 years ago
Customer Reply

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

bakab replied

4 years ago
Customer Reply

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

4 years ago
Staff Reply

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

4 years ago
Customer Reply

animation not working

PenciDesign replied

4 years ago
Staff Reply

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

4 years ago
Customer Reply

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

PenciDesign replied

4 years ago
Staff Reply

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

Want to join this conversation or access attachments? Sign in first.

Login to Reply