Menu animation

Hi there,

try this CSS:

@media(min-width: 769px) {
  .main-nav > ul > li > a {
        position: relative;
        --angle-size: 12px;
        --angle-color: #000000;
    }
    .main-nav > ul > li > a:before,
    .main-nav > ul > li > a:after {
        content: '';
        display: block;
        width: var(--angle-size);
        height: var(--angle-size);
        border: 1px solid transparent;
        position: absolute;
        pointer-events: none;
        opacity: 0;
        transition: all 0.3s;
    }
    .main-nav > ul > li > a:before {
        border-bottom-color: var(--angle-color);
        border-left-color: var(--angle-color);
        bottom: 0;
        left: 0;
        transform: translate(100%,-50%); 
    }
    .main-nav > ul > li > a:after {
        border-top-color: var(--angle-color);
        border-right-color: var(--angle-color);
        top: 0;
        right: 0;
        transform: translate(-100%,50%);
    }
    .main-nav > ul > li > a:hover:before,
    .main-nav > ul > li > a:hover:after {
        opacity: 1;
        transform: translate(0,0); 
    }
}

Notes, in the top CSS rule are 2 CSS variables:

--angle-size: 12px;
--angle-color: #000000;

the first sets the size of the angle and the other sets the hexcolor

The overall height and width of their position is based on the Menu Item Height and Width in the Customiser > Layout > Primary navigation.

You’re welcome