-
Posts
-
I found info here on how to do this, but it hasn’t worked. for me.
quick css#menu-item-6709 > a > .avia-menu-text { color: orange; }
This site is in staging site mode at this time. Is the above snippet what I should use or is there another.
If it is the right snippet, what might I need to do besides add it to css to make this work?
BTW, we haven’t done the most recent update due to the lag in client approval and the fact that any update we do will also mean extra work on the child theme by our team and we want to wait on the final update attempt until we are done with the client visual changes. However, it is a recent enough version of your theme that I don’t think that is the issue with the “color box”
Ah, nope,
While I am working on t his I also found this solution in support forum, for a box around the menu item which also didn’t work for me
#avia-menu #menu-item-6709 > a .avia-menu-text {
border: 2px solid #e8720b!important;
padding: 5px 10px;
border-radius: 4px;
}I would prefer this but was going to settle for merely a color. The box or a solid color would be best. They really want this one menu item to take focus. Thanks for any help on this.
Gotcha. Here is one of my sites, where I use what you’re after.
Set your menu item to Button Style (Bordered). Give that menu item a custom CSS class of “border-menu” and use the code below.
The last 2 items will grow and shink the box on hover, which adds a nice feature. Add in other lines as you need them, to address the colors and whatnot.
.border-menu .avia-menu-text {font-size:14px!important;}
.border-menu {transition: .3s ease-in-out!important;}
.border-menu:hover {transform: scale(1.1)!important;}I got it to work by moving it up the css list.
#avia-menu #menu-item-6709 > a .avia-menu-text {
border: 2px solid #e8720b!important;
padding: 5px 10px;
border-radius: 4px;
}I like your version too and will run it by the designer.
Thanks for the help.
Questions about what you did for the hover size increase effect on your site.
This:
Set your menu item to Button Style (Bordered). Give that menu item a custom CSS class of “border-menu” and use the code below.My meager understanding of css appears to have run out on this. Can a custom css class of “border-menu” be used with the enfold quick css?
When I have used custom css I define the item in the css file and it also goes in the page code. So I am unclear about this.
So, I am unclear if I can use your cool solution with the code I am using now by merely changing aspects of it.
#avia-menu #menu-item-6709 > a .avia-menu-text {
border: 2px solid #e8720b!important;
padding: 5px 10px;
border-radius: 4px;
}Hello. Yeah, you can just add my code to your Quick CSS. To the menu item you want to change, add the CSS class I mentioned, to it. You can name the class whatever you want.
Then, replace everything in your code, up to the left bracket, with .border-menu
If you’re on Facebook, look for our group and I’ll add you in. More tips there! The group name is below.
Enfold Design, Support and Community
Hi,
Thanks for helping out @WP Turned Up, much appreciated. Please let us know if you should need any further help on the topic @stevenleith.
Best regards,
Rikard
- You must be logged in to reply to this topic.