[Resolved] Style all links on GP

Home Forums Support [Resolved] Style all links on GP

Home Forums Support Style all links on GP

  • This topic has 26 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #547442
    Danny

    Hello,

    Thank you in advance for your help! I really like the styling of the css in this post. I have applied it to my menu and I would like to apply this styling to all my links on the website excluding the buttons. I would like to apply it to the secondary menu as well. On link hover, I would like the link to apply the underline styling and change color.

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #547665
    Leo
    Staff
    Customer Support

    Hi there,

    This should take care of both primary and secondary navigation:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item > a::after,
        .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;
        }
        .main-navigation .menu > .menu-item.current-menu-item > a::after,
        .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
        .main-navigation .menu > .menu-item > a:hover::after,
        .secondary-navigation .secondary-menu > .menu-item.current-menu-item > a::after,
        .secondary-navigation .secondary-menu > .menu-item.current-menu-ancestor > a::after,
        .secondary-navigation .secondary-menu > .menu-item > a:hover::after {
            width: 50%;
        }
    }

    I’ve asked Tom to take a look at normal links 🙂

    #547942
    Tom
    Lead Developer
    Lead Developer

    I don’t believe that CSS will work for regular links, but this post might help: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/

    Try replacing h2 in the code with p.

    #547977
    Danny

    Hey Leo,

    How would I add spacing between the secondary menu and the underline, see image below please:

    example

    #547988
    Danny

    Hey Tom,

    Thank you so much, that styling is perfect for the p tag. This makes me soooo happy! I added seperate code for h3 tags. How would I customize the code to underline the complete link. It only underlines the last line if the h3 tag is in two sentences. Please see example below:

    examle image

    #547992
    Danny

    Hey Leo,

    How would I remove the underline from the stylized menu button, see example below:

    example button

    #548564
    Tom
    Lead Developer
    Lead Developer

    To stop it from happening in your menu button, replace all instances of: .menu-item

    With: .menu-item:not(.nav-button)

    I’m not sure about the multi-line links unfortunately, I don’t believe the hover effects can accommodate those.

    #551250
    Danny

    Hi TOM,

    Can you help me implement something like the link below please for links? I would like it to be one solid color, not a gradient.

    Link

    #551294
    Tom
    Lead Developer
    Lead Developer

    That example is using SCSS, which needs to be processed into regular CSS. Perhaps there’s another example you can find?

    #551780
    Danny

    Hi Tom,

    Thank you for your help and time. Can you make a recommendation on the below code to make that work? If not, can you recommend something to underline multi-line links? The links should display as different colored text without an underline. I would like to underline only on hover. We can for get about that additional styling.

    #borderText {
    border-bottom: 1px solid white;
    transition: .5s;
    display: inline;
    cursor: pointer;
    }

    #borderText:hover {
    border-bottom: 1px solid black;
    }

    #textDecor {
    text-decoration: none;
    transition: .5s;
    }

    #textDecor:hover {
    text-decoration: underline;
    }
    <p id=”borderText”>
    Lorem Ipsum Sit Amet<br />
    Some other Text<br />
    Some Other Text<br />
    </p>

    <p id=”textDecor”>
    Here is some text<br />
    with text-decoration and<br />
    as you should see, the text<br />
    is underlined but cannot be transitioned<br />
    </p>

    #552234
    Tom
    Lead Developer
    Lead Developer

    It should be quite easy to underline on hover only.

    For example:

    .entry-content a {
        text-decoration: none;
    }
    
    .entry-content a:hover {
        text-decoration: underline;
    }

    Let me know if that’s not what you’re going for.

    #552266
    Danny

    Hello Tom,

    This works, thank you. How may I exclude buttons? Is it possible to thicken the line say 1px and distance it from the text?

    #552269
    Tom
    Lead Developer
    Lead Developer

    If you want more control over the underline, this might be better:

    .entry-content a:not(.button) {
        border-bottom: 2px solid transparent;
    }
    
    .entry-content a:not(.button):hover {
        border-bottom: 2px solid #222222;
    }
    #552318
    Danny

    Hello Tom,

    Thanks, almost there. Can this code be made to inherit the primary color for the underline?

    #552814
    Tom
    Lead Developer
    Lead Developer

    Try replacing #222222 with currentColor.

Viewing 15 posts - 1 through 15 (of 27 total)
  • You must be logged in to reply to this topic.