CSS Glowing Effect

  • Hello All,

    Please point me in the right direction on how to add CSS to OceanWP to achieve a “glowing effect” for menu links (about, press, projects, etc.). I have tried for over 24 hours to use “menu-main-menu,” “site-navigation,” & other selectors to achieve the desired outcome (which is https://www.w3schools.com/howto/howto_css_glowing_text.asp) to no avail. See below. Please help!!!

    I’ve tried

    #site-navigation{
    font-size: 80px;
    color: #fff;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    }

    @-webkit-keyframes glow {
    from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    try to add the below CSS code and check.

    #site-navigation-wrap .dropdown-menu >li >a {
font-size: 15px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
    Thread Starter esmelndn

    (@esmelndn)

    Thank you @abhikr781. I was able to fix my code & sort it out. Thank you for your help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Glowing Effect’ is closed to new replies.