Need to configure my Nav Menu.

[Jose]

Hi team. I’m going to copypaste the same text that I wrotte in my other post.

It begins here:

– Now, I need to make some changes to the main nav menu.

If you see the image that I’ve attached you, you could see the Nav Menu that I designed.

My actual menu is really close to the design, but there are 2 things that I couldn’t configure:

View post on imgur.com

1) If you see my design, the “active” section has a low bar with a purple color, but in my web need to be configured.

2) In my web, there is a place in the header that have a purple spot behind the nav menu, but is a dark zone, and “Portfolio” and “Contact” can’t be seen good enough, so, these options would must be “white” as you can see in the link that I provided.

Okay, this poses a problem for me, because this “changes” are just effective in the front page, in the rest of the web it have a classical menu (with classical I mean that isn’t set with “Elements”).

And when the web is adaptive for mobiles, the menu is collapsed

I don’t know if I’m explaining well enough because English is not my mother thonge, but I’ll be nice to repeat if is required.

PD: The low bar must be configured for all the menus of the whole web.

[Leo]

Hi there,

Sorry I’m not quite sure if I understand.

Can you let me know exactly what we are trying to fix and what the desired outcome is?

Change the navigation colors on the home page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Hi leo

What I need is to configure the Nav Menu so that every time you are in a section, a lower bar appears under the “menu option”, that means that if I am on the “Start” page it appears under the Start option of the menu a bottom bar, just as indicated in the image I attached.

If you see my website, it currently does not have that bar that I tell you when you are on that page.

In addition, this menu has a visibility problem, and it is that right behind the “Portfolio” and “Contact” options, there is a dark spot that is part of the background, and I need those options to look white. The problem is that when the menu collapses, these options have to be the original color again.

The second problem is that the menu on the “Start” page has been created with “elements”, because it is transparent, while the rest of the pages are normal menus, and I don’t know if this could lead to some kind of problem.

To end. What I need for sure is to configure the bottom bar that I mentioned, and if the color is not possible, I will look for an alternative to the menu.

Thanks for your help.

This text has been translated with Google Translate.

[Leo]

Are you looking for something like this?
https://docs.generatepress.com/article/adding-menu-hover-animation/

As for the colors, you can set navigation colors for that specific header element:
https://docs.generatepress.com/article/header-element-overview/#site-header
https://www.screencast.com/t/FPYpo3Zq

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Yes Leo, that one of the things that I was looking for, I applied, but now I need to change the color to this #8d91e9

But I still have problems with the Nav. As I said, my menu is splited in 2 sides, with a center logo. The right side must be white, while the left side must keep their colors (Obviously, the low bar must change to white when hover the right side), and I can’t do that changes from “elements”.

I can see too that the logo is acting as an option of the nav menu, which is normal, but the low bar mustn’t appear when you put the mouse over it.

[Tom]

To fix the logo getting an underline, try replacing your CSS with this:

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

In that CSS, you’ll see currentColor, which sets the underline to the current color of the link. You can change that to any color you like.

To change the color of the links on one side, you would need to give those menu items a specific class. Something like white-menu-items.

Then you could do this:

.main-navigation:not(.toggled) .main-nav ul li.white-menu-items a {
    color: white;
}

Of course, this is going to be an issue when you resize your site and the background image changes position. You may need to give the navigation a semi-transparent background so all the menu items can be the same color.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Hi Tom! Thanks for all your help.

I applied the code that you provide me and it works very well! Even when the menu is collapsed, because the options return to their original color.

Now, is there a way that when the right side get underlined, the low bar change to white, and when is in the left side, change to #8d91e9?

That probably will be the last thing that I need to complete the configuration of my Nav Menu.

Thanks for all guys!

EDIT: I saw a problem. I had one menu, and when I used the CSS “white-item” as you said, it was acting in the whole web, so, I created another menu that has the same structure, but any of these options are in white.

How can I apply this manu to the other pages excluding the front page?

[Tom]

I would set the second color in your normal CSS, then add this:

.home .main-navigation .menu > .menu-item:not(.menu-item-separator).white-item > a::after {
    background-color: #fff;
}

So are you only wanting this two-color CSS to apply on the front page?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Sorry Tom, but I don’t know what color should I set in my CSS and exactly where. Also, I didn’t apply the code because of what I explained.

And, answering your question, yes, I just want to apply this configuration on the front page.

[Tom]

In your main CSS (https://generatepress.com/forums/topic/need-to-configure-my-nav-menu/#post-1062564), set the background-color to #8d91e9.

Now all of your underlines will have that color.

Now add the CSS I provided above: https://generatepress.com/forums/topic/need-to-configure-my-nav-menu/#post-1063526

Your white menu items will now have a white underline.

I’ve adjusted the CSS above so it only applies on the home page.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

I did every step that you said me but it didn’t works and I don’t know why…

I had set the background color with #8d91e9, so, I just had to insert the new CSS, but it doesn’t look any change.

[Tom]

I can’t see your CSS, but your white menu items have this class: white-menu-items

In the CSS I provided above, I used white-item as the class. Did you update that to white-menu-items?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Okay, that was the problem. Thanks Tom!

Now, if you see my web, you will notice that the right side of the menu nav has change to the original color, and I need that items white too, and just in the front page, as the underline.

Any idea of how to do it?

[Jeff]

Hey Jose…can I ask you something? How did you put your website logo in the center of the menu bar? I would like to do that but can’t figure out how to do it. Does it require coding? Also, I like your website, did you make that using GP and Elementor?

[David]

Hi there,

this doc explains how to center the logo:

https://docs.generatepress.com/article/centering-logo-navigation/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts