[Resolved] Menu Hover Animation and Vertical Bar Divider

Hi there,

in the hover animation code you will see this property:

width: 50%;

change that to:

width: calc(100% - 40px);

Note: the 40px is equal to the Menu Item Width * 2.
The Menu Item Width is set in Customizer > Layout > Primary Navigation

For the vertical dividers try this CSS:

@media(min-width: 769px) {
  .main-navigation .menu>li:not(:last-child):after {
    content: '|';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translatey(-50%);
  }
}

You’re welcome

Try adjusting this line:

transform: translatey(-50%);

to:

transform: translatey(-55%);

That will move it up a little.

Sorry my bad.
In that case change:

right: 0;

to:

right: -4px;

The Divider is a pipe character ie. | – it is around 8-9px wide. So we’re simply moving it over half its width to keep it in position.

You’re welcome