How to change Menu Button Colours so only one is highlighted - Support

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
September 7, 2015 at 4:42 pm #499365

erusko
Participant

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 #499649
Ismael
Moderator
Hi 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,
Ismael
September 8, 2015 at 5:30 am #499654
erusko
Participant
Hm, 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, 2 months ago by erusko.
September 8, 2015 at 3:06 pm #499909

erusko
Participant

Hm, 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 #500218
Ismael
Moderator
Hi!

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,
Ismael
September 9, 2015 at 1:54 pm #500410
erusko
Participant
I 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, 2 months ago by erusko.
September 11, 2015 at 12:08 pm #501561
Andy
Inactive Moderator
Hey!

try this code for hover background-color in submenu:
```
ul.sub-menu li:hover {
background-color: green;
}
```
Regards,
Andy
September 12, 2015 at 3:45 am #501929

erusko
Participant

Hi 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 #502570

Andy
Inactive Moderator

Hey!

seems to me that you managed to do it already, because your menu stays green when clicked on it. Could you fix it?

Regards,
Andy

September 14, 2015 at 11:55 am #502632

erusko
Participant

Hi 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:

View post on imgur.com

However, I want it to look like this.

View post on imgur.com

Any ideas?

September 14, 2015 at 2:18 pm #502737
Andy
Inactive Moderator
Hey!

thanks for this explanation. Try this code:
```
.current_page_item {
background-color: green;
}
```
Cheers!
Andy
September 14, 2015 at 3:39 pm #502826

erusko
Participant

thanks, 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 #502959
Andy
Inactive Moderator
Hey!

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,
Andy
September 15, 2015 at 2:27 am #503095
erusko
Participant
nope, 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 #503310
Yigit
Keymaster
Hey!

Please change the code to following one
```
.sub-menu .current_page_item {
background-color: green;
} 
```
Best regards,
Yigit
September 15, 2015 at 3:12 pm #503389

erusko
Participant

Thanks Yigit, that was exactly what I was looking for!
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘How to change Menu Button Colours so only one is highlighted’ is closed to new replies.