This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Menu Bar Blink

Resolved 6 replies premiumthemetheme-vantage
flryne
10 years ago · Last reply by flryne 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Magus Staff 10 years, 7 months ago

    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. flryne 10 years, 7 months ago

    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. Magus Staff 10 years, 7 months ago

    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. flryne 10 years, 7 months ago

    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. Magus Staff 10 years, 7 months ago

    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. flryne 10 years, 7 months ago

    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.

Have a different question or issue?

Start New Thread