[Resolved] Header hover effect

[Lukasz]

Hi,
I have a minor issue with header hover effect. I’ve implemented below code but a line under category menu doesn’t cover whole width of a name for instance you have name CATEGORY but line covers only ATEGOR part. I hope that I am explaining it enough clear.

.main-navigation .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.4s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after,
		.main-navigation .menu > .menu-item.sfHover > a::after {
        width: 50%;
    }

[Leo]

Hi there,

What if you increase the width: 50%; style?

[Lukasz]

I have the question beyond the scope. Is there any possibility to view my topics on the forum? I don’t see a option in my account.

In terms of the question it shows line under the menu. I would like to have a line width hover effect proportionally to width of a letters size as you can see on the image (right now the width is proportional to total width of item header I’am guessing)

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

View post on imgur.com

[Leo]

Is there any possibility to view my topics on the forum?

You can do so by clicking your name link:
https://www.screencast.com/t/QRaTXdHc0

Shouldn’t changing it to 100% work?

[Lukasz]

After changing to 100% the line is too length. This is size of element menu, but I’d like to have size of string. My full CSS code on that is

@media (min-width: 769px) {
    .main-navigation .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.4s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after,
		.main-navigation .menu > .menu-item.sfHover > a::after {
        width: 100%;
    }
} /*End GeneratePress Site CSS */

This is strange but in my account my nickname isn’t clickable as you can see on the attachment (black nickname) but on your attachment it is (blue nickname). I don’t know why.

View post on imgur.com

[Tom]

You should just be able to do this:

.main-navigation .menu > .menu-item > a {
    border-bottom: 1px solid transparent;
}

.main-navigation .menu > .menu-item.current-menu-item > a,
.main-navigation .menu > .menu-item:hover > a,
.main-navigation .menu > .menu-item.sfHover > a {
    border-bottom: 1px solid #000;
}

Let me know 🙂

[Lukasz]

Nice effect, but the line should have length of a name as you can see on the images (before and after)

View post on imgur.com

[Lukasz]

After wondering I am happy with the happy solution. No need to make any other effort. Thanks for helping.

[Tom]

No problem! 🙂

[Author]

Posts