Site icon Puneet Sharma – Freelance Web Developer

CSS technique for elastic moving active background for navigations

Here is a simple CSS solution (javascript not needed here) to achieve the active state elastic animations that go from left to right during the active state of a particular nav tab.

Let “.bg-elastic” is the free-moving active state element inside the nav that can move freely behind the nav links.

.tabs-link:nth-child(4).tabs-link-active ~ .bg-elastic {
  left: 50%;
}
Exit mobile version