Archived topic

nav links effect on secondary navigation

5 replies · Started by Roland on December 19, 2017

Viewing posts 1–6 of 6

December 19, 2017 at 12:38 pm #453266

Hi there,

I added the nav links effect to the main menu using this code:

/* Menüpunkte unterstreichen - nav links effect - von generatepress.com */
@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a::after {
    content: "";
    color: #FF9034;
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 1px;

    background-color: currentColor;
    transition: 0.5s width ease;
    }
}

.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

Any idea how I can apply this effect to the secondary navigation too?

Roland

December 19, 2017 at 1:25 pm #453301

Hi there,

Try replacing all the .main-navigation with .secondary-navigation

Let me know.

December 19, 2017 at 2:18 pm #453337

Hi Leo,

that's exactly what I tried before:

/* Menüpunkte des zweiten Menüs unterstreichen - nav links effect - von generatepress.com */
.secondary-navigation .menu > .menu-item > a::after {
    content: "";
    color: #FF9034;
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 1px;

    background-color: currentColor;
    transition: 0.5s width ease;
    }

.secondary-navigation .menu > .menu-item.current-menu-item > a::after,
.secondary-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

But it doesn't work ...

Perhaps a misspelling I don't see?

Roland

December 19, 2017 at 4:27 pm #453412

Ahh give this a shot:

@media (min-width: 769px) {
    .secondary-navigation .secondary-menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .secondary-navigation .secondary-menu > .menu-item.current-menu-item > a::after,
    .secondary-navigation .secondary-menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

December 20, 2017 at 8:30 am #453891

Hi Leo,

that's it. Works fine.

Thanks a lot
Roland

December 20, 2017 at 2:24 pm #454135

No problem!

This archived topic is closed to new replies.

Start building better websites today.