Add Pulse to Menu Icon

I suggest replacing it with an animated SVG

I will try looking later on for you and will get back to you soon

Have you tried looking into keyframing in CSS?https://www.w3schools.com/css/css3_animations.asp

This is an example: https://i.imgur.com/C3N6UBE.gif

Subtle Animation Example: https://i.imgur.com/6waCDMp.gif

@Tim Burleigh . It seems this example would be perfect if it could be applied to mobiles. (excluding mobile apps) https://i.imgur.com/C3N6UBE.gif

Hello, @LoneTreeLeaf , Would you have the URL from this example? I'd like to play around with this one. https://i.imgur.com/C3N6UBE.gif

https://codepen.io/Zaku/pen/vcaFr

Hey, you're free to use what's in the image as I just kinda threw it together in a LiveCSS editor on my browser, it's not uploaded anywhere.

I'm unsure if injects work with the style html tag, but you would place that CSS between an open and closed style tag.

<style>
@keyframe example {
    0%   {font-size-adjust: 0.5;} /* Starting Frame */
    100% {font-size-adjust: 0.7;} /* Ending Frame */
}

i.bars {
    animation-name: example;  /* Defined Animation Name in @keyframe "example" */
    animation-duration: 1s;  /* Duration of the animation, can be .# values to speed up, the higher the value the slower the animation */
    animation-iteration-count: infinite; /* Repeats the animation */
    animation-direction: alternate; /* Starts from 0% then 100% then back to 0%, repeating. */
    animation-timing-function: ease-in-out;  /* Smooths the animation from beginning to end. */
}
</style>

While this is fancy, it would require the end-user to install https://coffeescript.org/ on the server.

How did you place it in injections? Tested it from my end and it works.

Injections Window: https://i.imgur.com/ut8HXLu.png

Protean Theme View: https://i.imgur.com/iSuSrca.gif

That's rather strange... are you able to take and share a screenshot here of what your HEAD injection looks like? In the meantime, also try this.

<style>
 @keyframes pulse-animation {
  0% {
      font-size-adjust: 0.5; }
 
  100% {
    font-size-adjust: 0.7;
  }
}

i.bars {
    animation-name: pulse-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
</style>

There's not much difference between the CSS I provided before aside from renaming the animation and removing all CSS comments.

Also try clearing your cache from the Dashboard from Studio.

I'm at a loss for an answer about this, I'm using the last one I provided and it's working. What theme are you using?

Very same theme I used for my demo as it doesn't work for the newest theme UNA has provided for UNA 13.

I find it hard to believe there could be a conflict with third party modules that differ from my own install as it's a very trivial CSS addition.

Yes I'm running 13, it's a non-production site, using it to test a few things.

Can't you just replace the icon with an animated gif?

You're not going to find it in storage as it's not a media file in general. UNA dev team is utilizing Font Awesome to render the icon. This would require a file edit from within the script.

I have not played with my una site for a while, but i could swear it's like what you mentioned following my comment. Hmmm.......

I think i found it, studio>navigation>site toolbar

YA It is a bit aggravating that the script (UNA) relies so heavily on outside sources. It does make it sluggish and combersome at times to achieve goals within sites. Websites created with UNA are then very dependent on other sites to be up and running in order to keep UNA sites moving and up.

LOL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!