Home>Support>Menu Bar Blink

Menu Bar Blink

By flryne, 9 years ago. Last reply by flryne, 9 years ago.

Greetings,
At one point we were able to have the “Free Quote” link on our menu bar blink on its own between the blue and yellow (like it was being hovered over) on our old website. I no longer have access to that old code. Is there a way to do this with some CSS or other method with the Vantage theme?
Thank you
Ryne
a1fla.com

URL: http://www.a1fla.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Ryne

    Please try adding this to Appearance->Custom CSS

    @keyframes freequote {
    from {background-color: #006fb6;}
    to {background-color: #FFBC25;}
 }
#menu-item-36 a {
    animation-name: freequote;
    animation-duration: 4s;
}

    Please change the animation duration element to get the flashing speed you desire

    Let us know how you get on.

    Magus

  2. 9 years, 3 months ago flryne

    Hello Magus,

    Its blinking, but only once when the page loads. It goes from blue to yellow just one time and just stops. The CSS update is live so if you want to check it out its at a1fa.com

    Thanks!

  3. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Ryne

    Please change the previous code to this.

    body { background: #0ff; }
@keyframes blink {
    from {background-color: #006fb6;}
    to {background-color: #FFBC25;}
}
#menu-item-36 a {
    animation-direction: alternate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: blink;
    animation-timing-function: ease;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease; 
    -moz-animation-direction: alternate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease;
}

    I have added some extra elements for cross-browser support and to give you a true blink effect.

    Magus

  4. 9 years, 3 months ago flryne

    Magus

    I dropped out

     body { background: #0ff; }

    because it was turning the background of the entire site blue. Right now its working in chrome and firefox but not safari. For reference here is all the custom css thats running on the site.

    @keyframes blink {
    from {background-color: #006fb6;}
    to {background-color: #FFBC25;}
}
#menu-item-36 a {
    animation-direction: alternate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: blink;
    animation-timing-function: ease;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease; 
    -moz-animation-direction: alternate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease;
}
.main-navigation a {
  text-transform: uppercase;
}

/* Menu Padding Horizontal */

.main-navigation ul li a {
padding-right: 20px !important;
padding-left: 20px !important;
}
  5. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Ryne

    Thanks for dropping that, my fault, selected too much from my test code. Please add the following for safari support.

    @-webkit-keyframes blink {
    from {background-color: #006fb6;}
    to {background-color: #FFBC25;}
}

    Magus

  6. 9 years, 3 months ago flryne

    Magus,

    Working beautifully! Thank you for the help!

    Ryne

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More