[Resolved] Slide in underline effect on the main navigation

Home Forums Support Slide in underline effect on the main navigation

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1314374
    Daniel

    Hey there,

    I am currently transferring an Elementor built design from a pretty bloated and clunky themeforest theme, which admittedly is not officially compatible with Elementor at all, over to GeneratePress.
    The speed increased by 50% easily just by switching the theme, ha! 🙂

    I am now trying to recreate the slide in underline effect on the main navigation.
    You can see how it currently looks on the *old* site here: thetaconnection.de

    And here is what I got so far on the *new* site – mine is a bit slower, which I like.

    (URL to the dev page in the website URL field so it’s not public)
    Login: rb
    PW: elegantowl

    Now I managed successfully to create this sliding underline effect light weight using only CSS, BUT the underline is now way away from the links.
    I tried messing around with margins and paddings on the various parts of the .main-navigation .main-nav ul li a class but to no success. Any idea how to move the underline closer to the links?
    Here is my current CSS:

    .main-navigation .main-nav ul li a
    {
    text-decoration:none;
    display: inline-block;
    color:black;
    }
    
    .main-navigation .main-nav ul li a:after 
    {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    margin-bottom:20px !important;
    background: transparent;
    transition: width .5s ease, background-color .5s ease; /* .5 seonds for changes to the width and background-color */
    -webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
    -moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
    }
    
    .main-navigation .main-nav ul li a:hover:after 
    {
    width: 100%;
    background: black;
    }
    

    Also, I would like the underline to stay there when you click on a link, to indicate where the visitor currently is on the side. I have failed to do that as well.

    Thanks so much for your help! 🙂

    Daniel

    #1314419
    Daniel

    Oh damn, I just managed to solve this using the “Menu Item Height” setting.. sorry that was quite obvious!

    The other question remains: How do I make the underline stick on active?

    Thanks again!

    #1314490
    Leo
    Staff
    Customer Support

    Hi there,

    You’d need something for .current-menu-item similar to the example here:
    https://docs.generatepress.com/article/adding-menu-hover-animation/

    #1319549
    Daniel

    Hi Leo,

    I have tried but all I managed to change using the code you linked is the hover effect (as the article does). Not sure how I target the “current” menu item correctly. Ideally it would keep the transitioning underline permanently when active. Is that at all possible?

    Thanks for your help!

    #1319687
    Leo
    Staff
    Customer Support

    What about something like this:

    .main-navigation .main-nav ul li[class*="current-menu-"] > a:after {
        width: 100%;
        background: #000;
    }
    #1319697
    Daniel

    Thanks so much Leo!

    That worked perfectly :))

    #1319698
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.