Jump to content

need help with a code for element in header

Recommended Posts

hello,

https://www.dragonaflooring.ca/

I have attached an Image, I want crazy deals in the header element to be highlighted and blink. i have created a CSS code but its not working their is some error in the code. Can you please help me with this?

here's the code, thanks in advance.

 

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Blinking Text</title>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        div{
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(-0%, -0%);
}
   
        
      
        h2 {
            color: #008000;
            text-align: center;
            animation: animate
                1.5s linear infinite;
        }

        @keyframes animate {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 0.7;
            }

            100% {
                opacity: 0;
            }
        }
      {
        header-nav-item header-nav-item--collection {
    </style>
</head>
<body>
    <div> 
      
      <h2>CRAZY DEALS</h2>
      
    </div>
</body>

</html>

Capture.PNG

Link to comment
  • Replies 1
  • Views 116
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Try plugging this into your custom css and see if it works for you...

/* This controls color and blink speed on desktop */
.header-nav a[href*="crazy-deals"] {
    color: yellow;
    animation: blinker 1s linear infinite;
}

/* This controls color and blink speed on mobile */
.header-menu-nav-folder-content a[href*="crazy-deals"] {
    color: red !important;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

 

Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.