[Resolved] Menu Hover Animation and Vertical Bar Divider

Home Forums Support [Resolved] Menu Hover Animation and Vertical Bar Divider

Home Forums Support Menu Hover Animation and Vertical Bar Divider

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1661377
    Henk

    Hello,

    I have created a menu with hover animation as described here.
    How do I make sure the underline effect is the same width as the word (menu item) above it?

    Also I want to add a vertical bar divider as described here. (Method 1)

    #1661594
    David
    Staff
    Customer Support

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

    Thanks David!

    #1661931
    David
    Staff
    Customer Support
    #1683077
    Henk

    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?

    #1683142
    David
    Staff
    Customer Support

    Try adjusting this line:

    transform: translatey(-50%);

    to:

    transform: translatey(-55%);

    That will move it up a little.

    #1684100
    Henk

    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.

    #1684655
    David
    Staff
    Customer Support

    Sorry my bad.
    In that case change:

    right: 0;

    to:

    right: -4px;

    #1685259
    Henk

    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.

    #1685640
    David
    Staff
    Customer Support

    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.

    #1686780
    Henk

    Thank you David!

    #1686851
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.