- This topic has 18 replies, 5 voices, and was last updated 3 years, 2 months ago by
David.
-
AuthorPosts
-
November 13, 2019 at 3:33 am #1061576
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:
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.
November 13, 2019 at 8:27 am #1062076Leo
StaffCustomer SupportHi 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/November 13, 2019 at 8:38 am #1062090Jose
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.
November 13, 2019 at 9:44 am #1062162Leo
StaffCustomer SupportAre 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/FPYpo3ZqLet me know if this helps 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 13, 2019 at 2:26 pm #1062402Jose
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.
November 13, 2019 at 7:21 pm #1062564Tom
Lead DeveloperLead DeveloperTo 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-developmentNovember 14, 2019 at 5:03 am #1062857Jose
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?
November 14, 2019 at 6:20 pm #1063526Tom
Lead DeveloperLead DeveloperI 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-developmentNovember 17, 2019 at 5:27 pm #1065926Jose
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.
November 18, 2019 at 9:19 am #1066665Tom
Lead DeveloperLead DeveloperIn 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-developmentNovember 18, 2019 at 3:14 pm #1066909Jose
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.
November 18, 2019 at 3:47 pm #1066935Tom
Lead DeveloperLead DeveloperI 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 towhite-menu-items
?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 19, 2019 at 2:02 am #1067175Jose
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?
November 19, 2019 at 5:27 am #1067314Jeff
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?
November 19, 2019 at 5:59 am #1067345David
StaffCustomer SupportHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.