Add Red Pulsing Dot on Menu Item

Share this resource

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on facebook
Submitted by: Donald McGuinn

Using this brings attention to a menu item you want your customers to click on. Add this to your custom css.

Be sure to change the menu item number to match what your menu item number is. Adjust the “top” and the “left” tags as needed on your site.

/*RED PULSING DOT*/
.menu-item-262:before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: -10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff0932;
    box-shadow: 0 0 0 0 rgba(255,255,255,.2);
    animation: pulse 2s infinite;
    z-index: 999;
}

@media (max-width: 767px){
	.menu-item-262:before {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff0932;
    box-shadow: 0 0 0 0 rgba(255,255,255,.2);
    animation: pulse 2s infinite;
    z-index: 999;
}
}

@keyframes pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
     }
     100% {
          box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
     }
}