[Resolved] my nav menu bar issue

Home Forums Support [Resolved] my nav menu bar issue

Home Forums Support my nav menu bar issue

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #653777
    Abali

    thanks for all your support! I have a little issue as regards to the nav bar, I noticed it too padded all-around and the hover underline is a way too far from the menu item and even I added button it assume the nav height. I need your help to solve this issue. thank once again—-this is the site under construction (TIMELESSPERSONS.COM) I AM JUST A LEARNER.

    GP Premium 1.7.1
    #653864
    Leo
    Staff
    Customer Support

    Hi there,

    Perhaps you would like this better?
    https://docs.generatepress.com/article/adding-menu-hover-animation/

    Let me know ๐Ÿ™‚

    #654918
    Abali

    Thanks, Leo it worked but I still have an issue with the search icon on the nav menu it has an underline whenever I hover. I want to get rid of it, and also I needed a button for the “donate” menu item… I tried with this:

    @media
    (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    }
    }
    it gave a disgustine presenatation i need your help on this. a button that fits well into the nav menu bar.

    #655114
    Leo
    Staff
    Customer Support

    Hmm looks like the search icon is still getting the original border you’ve added before – you can see that it’s different than the hover animation.

    Have you remove the CSS?

    For the button, you can try adding a line-height: 45px; inside the existing CSS.

    #655655
    Abali

    hello again! I added the line-height and it worked thanx to you Leo but on the button, as you hover it still has a borderline through on the button text which is not nice. How do I get rid of it!

    #655897
    Leo
    Staff
    Customer Support

    Can you try modifying the hover animation CSS to this:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item:not(.nav-button) > 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:not(.nav-button) > a::after,
        .main-navigation .menu > .menu-item.current-menu-ancestor:not(.nav-button) > a::after,
        .main-navigation .menu > .menu-item:not(.nav-button) > a:hover::after {
            width: 50%;
        }
    }
    #656057
    Leo
    Staff
    Customer Support

    No problem.

    p.s. make sure you reply to the thread and not the e-mail ๐Ÿ™‚

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