Archived topic

my nav menu bar issue

6 replies · Started by Abali on August 19, 2018

Viewing posts 1–7 of 7

August 19, 2018 at 3:17 pm #653777

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.

August 19, 2018 at 7:13 pm #653864

Hi there,

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

Let me know :)

August 20, 2018 at 2:10 pm #654918

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.

August 20, 2018 at 7:48 pm #655114

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.

August 21, 2018 at 7:27 am #655655

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!

August 21, 2018 at 9:23 am #655897

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

August 21, 2018 at 12:14 pm #656057

No problem.

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

This archived topic is closed to new replies.

Start building better websites today.