[Resolved] my nav menu bar issue

[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.

[Leo]

Hi there,

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

Let me know 🙂

[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.

[Leo]

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.

[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!

[Leo]

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%;
    }
}

[Leo]

No problem.

p.s. make sure you reply to the thread and not the e-mail 🙂

[Author]

Posts