Archived topic

Menu animation

3 replies · Started by Factory Prime on March 12, 2021

Viewing posts 1–4 of 4

March 12, 2021 at 5:24 am #1692323

Hi
I put an animation in the menu:

/* MENU HOVER ANIM */
.main-navigation ul li a::after{
position: absolute;
content: "";
top: 90%;
left: 0;
width: 100%;
height: 5px;
background: #002855;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.5s;}

.main-navigation ul li a:hover::after{
transform: scaleX(0.6);
transform-origin: center;}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:after {
position: absolute;
content: "";
top: 90%;
left: 0;
width: 100%;
height: 5px;
background: #002855;
transform: scaleX(0.2); }

but I would like it to be limited to the menu and not the sub menu.
how can I do?
Tnx!!

March 12, 2021 at 7:14 am #1692658

Hi there

try this CSS:

.main-navigation .main-nav>ul>li>a::after {
  position: absolute;
  content: '';
  top: 90%;
  left: 0;
  width: 100%;
  height: 5px;
  background: #002855;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s;
}

.main-navigation ul>li>a:hover::after {
  transform: scaleX(0.6);
  transform-origin: center;
}

.main-navigation ul>li[class*="current-menu-"]>a::after {
  transform: scaleX(0.2);
}

March 12, 2021 at 7:22 am #1692668

Prefect!!!!!!! work fine.
Thank you.

March 12, 2021 at 8:14 am #1692734

Glad to be of help.

This archived topic is closed to new replies.

Start building better websites today.