Jump to content

need help with a code for element in header

Recommended Posts



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">


    <title>Blinking Text</title>

        body {
            margin: 0;
            padding: 0;

  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 {
      <h2>CRAZY DEALS</h2>



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.