Archived topic

hover effect for menu items and an image file

1 reply · Started by Torsten on January 7, 2020

Viewing posts 1–2 of 2

January 7, 2020 at 2:04 am #1124359

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

January 7, 2020 at 8:18 am #1124818

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

This archived topic is closed to new replies.

Start building better websites today.