- This topic has 37 replies, 4 voices, and was last updated 3 years, 4 months ago by Leo.
-
AuthorPosts
-
November 6, 2020 at 6:59 am #1520637ken
Hi David,
Thank you for your reply.
So could you help me out with the following topics here and I will open a new topic for the search?
– when the menu button is selected, the background turns white, how do i change that? Tired setting current-menu-item but it didn’t work.
– dropdown background colour change when hover
– menu background color when selected (at the page)
for the navbar.November 6, 2020 at 11:23 am #1520968LeoStaffCustomer Support– when the menu button is selected, the background turns white, how do i change that? Tired setting current-menu-item but it didn’t work.
Currently you are just using this selector for ths CSS:
#menu-item-174
and not utilizing themenu-butt
you’ve added at all.Can you try using the CSS suggested here?
https://docs.generatepress.com/article/adding-buttons-navigation/November 7, 2020 at 12:00 am #1521348kenby the css here, do you mean:
@media (min-width:769px) { .main-navigation .main-nav ul li.nav-button a { background-color: #ffffff; border: 2px solid #000000; color: #000000; line-height: 35px; /*this number will likely need to be adjusted*/ } }
? I have implemented this class and styled it but I am still getting a white background when hover over it.
November 7, 2020 at 9:26 am #1521889LeoStaffCustomer SupportRemove this CSS:
#menu-item-174 a { color: white; }
Then modify this:
@media (min-width: 769px) { .main-navigation .main-nav ul li.nav-button a { background: #4F62ED 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000040; border-radius: 30px; opacity: 1; } }
to this:
@media (min-width: 769px) { .main-navigation .main-nav ul li.nav-button a { background: #4F62ED 0% 0% no-repeat padding-box !important; box-shadow: 0px 3px 6px #00000040; border-radius: 30px; opacity: 1; } }
November 8, 2020 at 12:56 pm #1522984kenHi Leo,
Seems to work, thanks!
Can you tell me how to set the background color:
– during hover with opacity and
– when selected to solid?November 8, 2020 at 1:31 pm #1523004ElvinStaffCustomer SupportHi,
You can add
:hover
selector the hover state.Add this CSS in your
@media (min-width: 769px) {...}
:.main-navigation .main-nav ul li.nav-button a:hover { background: rgba(79, 98, 237, 0.5) 0% 0% no-repeat padding-box !important; }
If you want smooth transition to the hover animation, add
transition: background 0.5s;
We basically modify Leo’s code a tad bit to something like this:
@media (min-width: 769px) { .main-navigation .main-nav ul li.nav-button a { background: #4F62ED 0% 0% no-repeat padding-box !important; box-shadow: 0px 3px 6px #00000040; border-radius: 30px; opacity: 1; transition: background 0.5s; } .main-navigation .main-nav ul li.nav-button a:hover { background: rgba(79, 98, 237, 0.5) 0% 0% no-repeat padding-box !important; } }
You can change the opacity value of the background on hover by changing “0.5” to something a lower/higher value.
when selected to solid?
I’m not sure I get what you mean. Can you explain further? thank you.
November 9, 2020 at 1:31 am #1523394kenHi Elvin,
Sorry for not making it clear, I would like to have the background of the dropdown (about) to have the different background color.
With solid i mean the color being solid when the menu item is selected. The other thing is, I think opacity might not be what I need, is it possible to have the color to “mix” with the background? As in there are two layers of color and when hovered over, it will add an additional layer on top of it.
Thanks!
November 9, 2020 at 9:10 am #1524174LeoStaffCustomer SupportCan you please open a new topic for the follow questions?
As you can see it’s just getting a little bit hard to track on what the issue is etc.
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.