Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 29, 2024 at 8:45 pm #1470156
    michelebond

    Hello, is there anyway to make the button color in the menu navigation a gradient?

    October 29, 2024 at 10:53 pm #1470176
    Guenni007

    you can see it here even with animation on Main Menu “Impressum” : https://webers-testseite.de/
    If you do not need that animation – remove that part from rules and set the background-size to 100%.

    You can select that menu-item via ID
    and do something like this:

    #menu-item-ID .avia-menu-text {
  color: #fff;   /**** perhaps an !important is necessary ****/
  background: linear-gradient(-45deg,#FFA63D,#FF3D77,#338AFF,#3CF0C5);
  background-size: 600%;
  border: none !important;
  animation: anime 14s linear infinite;
  padding: 11px 20px !important;
  border-radius: 0 0 10px 10px !important;
}

@keyframes anime {
  0% { background-position:0% 50% }
  50% { background-position:100% 50% }
  100% { background-position:0% 50% }
}
    October 30, 2024 at 5:44 pm #1470264
    michelebond

    That Animation looks great how would I apply this to my button?

    October 30, 2024 at 8:40 pm #1470273
    Guenni007

    you have to know your menu-item ID
    i – as a Participant – can not see private content area.

    October 31, 2024 at 4:17 am #1470302
    Ismael

    Hi,

    We adjusted the css code a bit:

    #menu-item-691 .avia-menu-text {
    color: #fff;
    background: linear-gradient(-45deg,#FFA63D,#FF3D77,#338AFF,#3CF0C5);
    background-size: 600%;
    border: none !important;
    animation: anime 14s linear infinite;
    padding: 11px 20px !important;
    overflow: hidden;
}

@keyframes anime {
  0% { background-position:0% 50% }
  50% { background-position:100% 50% }
  100% { background-position:0% 50% }
}

    Best regards,
    Ismael

    October 31, 2024 at 6:24 pm #1470362
    michelebond

    Thank you so much! 5 Stars!

    November 1, 2024 at 5:12 am #1470388
    Ismael

    Hi,

    No problem! Glad @Guenni007 helped. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Menu button gradient?’ is closed to new replies.