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%);
  }
}

Thanks David!

You're welcome

Hi David,

I changed my menu item width in the customizer to 18px, but now my vertical divider bar is not centered anymore. How do I center them again?

Try adjusting this line:

transform: translatey(-50%);

to:

transform: translatey(-55%);

That will move it up a little.

Hi David,

I think I was not clear in my question. I was talking about the horizontal alignment of the divider bars. There is more room on the right. The horizontal alignment is not in the middle. I tried to resolve this problem with adjusting the .main-navigation .menu>li:not(:last-child):after but this does not help.

Is there another CCS technique to get divider bars in the menu? With the current technique I can't get them aligned properly.

Sorry my bad.
In that case change:

right: 0;

to:

right: -4px;

Thanks David!

That is better. Can you tell me why it has to be -4px? I don't understand where that is coming from? right: 0; shoud be in the middle.

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.

Thank you David!

You're welcome