How to make some content menu items glow?

#tipsandtricks

Sometimes we need some menu items to be different, here is a general setup for adding a glowing animation to menu titles:

Go to Studio>Pages>Homepage

Click settings > Injections

Paste this CSS code to the head box:

<style>
.hkglow {
  font-size: 1rem; /* Adjust the font size as needed */
  color: #333; /* Text color */
  text-align: center; /* Center the text */
  /* Other styles... */
  /* Add vendor prefixes for broader browser support */
  animation: glowing 2s infinite; /* Apply the 'glowing' animation */
}

/* Keyframes for the glowing effect */
@keyframes glowing {
  0% {
    text-shadow: 0 0 10px #fff; /* Initial shadow color and size */
  }
  50% {
    text-shadow: 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f; /* Intermediate shadow color and size */
  }
  100% {
    text-shadow: 0 0 10px #fff; /* Return to the initial shadow */
  }
}

</style>

now we defined "hkglow" class and we will use it in our menu titles.

Goto Studio > Navigation Click the items of homepage menu

Click the edit icon of the item

change the item title like:

<span class="hkglow">Your item title</span>

Save and goto your home page and refresh the page

that's all now you have a glowing animated menu item :)