[Resolved] Header hover effect

Home Forums Support Header hover effect

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1252110
    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%;
        }
    #1252154
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1254903
    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

    #1255227
    Leo
    Staff
    Customer Support

    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?

    #1255356
    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

    #1255739
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1256069
    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

    #1256626
    Lukasz

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

    #1256669
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.