[Resolved] hover effect for menu items and an image file

Home Forums Support hover effect for menu items and an image file

  • This topic has 1 reply, 2 voices, and was last updated 1 year ago by Tom.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1124359
    Torsten

    Hi,
    I’m trying to move the menu elements “News”, “Karriere”, “Kontakt” (top right / dark background) on hover 4px down, as I managed in the UberMenu below the header with the following:

    .ubermenu .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target > .ubermenu-target-text{
        transition:transform 350ms ease-in-out;
    }
    .ubermenu .ubermenu-item.ubermenu-item-level-0:not(.ubermenu-item-194):hover > .ubermenu-target > .ubermenu-target-text{
        transform:translateY(4px);
    }

    Same effect wanted in “Team” below the portraits, the white arrow in yellow square.
    That element should be always a few Pixel lower (the bottom of the arrow should align with the bottom of the text) and move down on hover another 4px.
    thanks in advance,
    best,
    Torsten

    #1124818
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this CSS:

    .main-navigation .main-nav > ul > li {
        transition: transform 350ms ease-in-out;
    }
    
    .main-navigation .main-nav > ul > li:hover {
        transform: translateY(4px);
    }

    For the arrows, you’ll want to put them inside some HTML like this:

    <div class="arrow-container">
        <span class="arrow-text">Your text</span>
        <span class="arrow-image">Your image</span>
    </div>

    Then add this CSS:

    .arrow-container {
        display: flex;
        align-items: center;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.