-
AuthorPosts
-
September 7, 2015 at 4:42 pm #499365
https://kriesi.at/support/topic/changing-top-menu-bar-links-to-have-rounded-corners/#post-499273
Was trying to post in the above link, but it closed before I could add to it. After I changed the menu links to buttons, some of the highlighting effects changed… and now, all the buttons are highlight green (inactive menu links). Also, the submenu links are no longer highlighted in green (with white text). Nothing I change seems to fix this now… Any idea how on how to do this? I eventually want it to resemble the other site I have in my link.
September 8, 2015 at 5:15 am #499649Hi erusko!
Thank you for using Enfold.
Use this in the Quick CSS field:
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text { background-color: transparent; color: black; border-color: transparent; } #top #wrap_all .header_color .av-menu-button-colored:hover > a .avia-menu-text, #top #wrap_all .header_color .current-menu-item > a .avia-menu-text { background-color: #016852; color: #ffffff; border-color: #004630; }
Regards,
IsmaelSeptember 8, 2015 at 5:30 am #499654Hm, this didn’t change anything.
Here’s all the code added into the Quick CSS. Do you think any of the following is messing it up?
#footer .social_bookmarks li a { border-radius: 100px!important; } #footer .social_bookmarks li { clear: none!important; } #footer .social_bookmarks li { clear: none; border-color: #222222; } .main_menu ul:first-child > li > a { font-size: 16px; } .main_menu ul:first-child > li > a { font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; } /* changes menu font*/ #top .main_menu .menu li ul a { font-size: 14px; } #top .av-main-nav > li > a { font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif } #footer .widgettitle { font-size: 16px; } .widget { font-size: 14px; } .header-scrolled .logo img { padding-top: 5px; } .logo img { padding-top: 5px; } .logo img { padding-bottom: 5px; } /* This takes out the green hover icon over pictures */ .image-overlay { display: none!important; } #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text { background-color: transparent; color: black; border-color: transparent; } #top #wrap_all .header_color .av-menu-button-colored:hover > a .avia-menu-text, #top #wrap_all .header_color .current-menu-item > a .avia-menu-text { background-color: #016852; color: #ffffff; border-color: #004630; }
- This reply was modified 9 years, 3 months ago by erusko.
September 8, 2015 at 3:06 pm #499909Hm, so I checked back into the site and it looks like it did update slightly. The buttons are now working, but I’ve noticed a couple other things.
1. The Menu button’s aren’t staying highlighted when I click a Sub-Menu link. Is there a way to fix this?
2. I’d like the background of the Sub-Menu’s to be green, but they’re staying as white. In fact, I can’t seem to change any of these colours easily (background, text, etc…) Do you know what’s wrong?
3. Is there a way to change the Sub-Menu so it connects to the top Menu button on mouse-hover? This is what I’m aiming for, but this is what I’m getting.Thanks again so much for helping!
September 9, 2015 at 8:29 am #500218Hi!
Replace the code with this:
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text { background-color: transparent; color: black; border-color: transparent; } #top #wrap_all .header_color .active-parent-item > a .avia-menu-text, #top #wrap_all .header_color .av-menu-button-colored:hover > a .avia-menu-text, #top #wrap_all .header_color .current-menu-item > a .avia-menu-text { background-color: #016852; color: #ffffff; border-color: #004630; }
Best regards,
IsmaelSeptember 9, 2015 at 1:54 pm #500410I switched out the code, and it seemed to have fixed the top menu button so once the submenu is clicked, the top menu button stays highlighted.
The other issue coming up now is that the submenu link that is clicked is highlighting only the text, but not the whole submenu link.
example: http://i.imgur.com/rwZN3Vj.png
any way to fix this? Thanks again for helping!
- This reply was modified 9 years, 3 months ago by erusko.
September 11, 2015 at 12:08 pm #501561Hey!
try this code for hover background-color in submenu:
ul.sub-menu li:hover { background-color: green; }
Regards,
AndySeptember 12, 2015 at 3:45 am #501929Hi Andy,
Thanks for the response. Not quite what I’m looking for. Is it possible to do what that code does, but not on hover? So after you click the link, the background highlight stays green on the page you’re currently viewing?
September 14, 2015 at 10:42 am #502570Hey!
seems to me that you managed to do it already, because your menu stays green when clicked on it. Could you fix it?
Regards,
AndySeptember 14, 2015 at 11:55 am #502632Hi Andy,
Sorry, I don’t think I explained it very well.
So, when I click a submenu link, it’ll go to the page. When I bring the mouse back to the link and look at that same submenu, the page link I’m looking at will be highlighted like this:
However, I want it to look like this.
Any ideas?
September 14, 2015 at 2:18 pm #502737Hey!
thanks for this explanation. Try this code:
.current_page_item { background-color: green; }
Cheers!
AndySeptember 14, 2015 at 3:39 pm #502826thanks, that’s what I’m looking for!
however, is it possible to turn this off for the top menu buttons? i’d like it if this were only active for the submenu links.
September 14, 2015 at 6:04 pm #502959Hey!
hm, try this:
#top #wrap_all .header_color .active-parent-item > a .avia-menu-text, #top #wrap_all .header_color .av-menu-button-colored:hover > a .avia-menu-text, #top #wrap_all .header_color .current-menu-item > a .avia-menu-text { color: green; background-color: transparent; }
Best regards,
AndySeptember 15, 2015 at 2:27 am #503095nope, that doesn’t seem to do anything. I already have a version of that code already:
#top #wrap_all .header_color .active-parent-item > a .avia-menu-text, #top #wrap_all .header_color .av-menu-button-colored:hover > a .avia-menu-text, #top #wrap_all .header_color .current-menu-item > a .avia-menu-text { background-color: #016852; color: #ffffff; border-color: #004630; }
This one worked fine for the submenu, but if it could be turned off for the top main menu, that would be perfect.
.current_page_item { background-color: green; }
September 15, 2015 at 1:03 pm #503310Hey!
Please change the code to following one
.sub-menu .current_page_item { background-color: green; }
Best regards,
YigitSeptember 15, 2015 at 3:12 pm #503389Thanks Yigit, that was exactly what I was looking for!
-
AuthorPosts
- The topic ‘How to change Menu Button Colours so only one is highlighted’ is closed to new replies.