Active menu olour having different menu colours - Support | Kriesi.at

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

Author

Posts
February 27, 2017 at 9:47 am #752209
Neverlands
Participant
Hello,
I set up different menu background colours für different sub menus.
When hovering over a sub menu the colour of the main menu link changes too:
```
li#menu-item-25:hover > a > .avia-menu-text { color: orange; }
li#menu-item-109 > a, li#menu-item-110 > a, li#menu-item-111 > a { background-color: rgba(255, 165, 0, 0.95); border-bottom: 1px solid white; }
li#menu-item-109 > a:hover, li#menu-item-110 > a:hover, li#menu-item-111 > a:hover { background-color: rgba(247, 184, 49, 0.95); }

li#menu-item-26:hover > a > .avia-menu-text { color: #930270; }
li#menu-item-101 > a, li#menu-item-102 > a, li#menu-item-103 > a { background-color: rgba(148, 2, 111, 0.95); border-bottom: 1px solid white; }
li#menu-item-101 > a:hover, li#menu-item-102 > a:hover, li#menu-item-103 > a:hover { background-color: rgba(173, 56, 142, 0.95); }
```
How can I change the the colour “active” main menu links?
And how can I change the colour of an “active” sub menu links?

Example: Image
March 1, 2017 at 7:58 am #753485
Rikard
Keymaster
Hey Neverlands,

Please try the following in Quick CSS under Enfold->General Styling:
```
.current-menu-item .avia-menu-text {
  color:red !important;
}
```
Best regards,
Rikard
March 1, 2017 at 2:43 pm #753740

Neverlands
Participant

Hi Rikard,

I tried this but it also changes the colour of all menu-text in the active sub-menu.
Also, I have to specify the number of the menu-item (ex: li#menu-item-28) because each main-menu text shoud have another colour.

Best regards,
Neverlands

March 1, 2017 at 2:53 pm #753743
Neverlands
Participant
And a related question:
Is it possible to make a function like: if top parent’s menu title or the category of the post contains “products” then add the class “products” to the menu items.
Then I woudln’t have to specify each single menu item number in the css, everytime there is a new main or sub menu entry.

Something like
```
function add_category_name($classes = '') {
   if(is_single()) {
      $category = get_the_category();
      $classes[] = 'category-'.$category[0]->slug; 
   }
   return $classes;
}
add_filter('nav_menu_css_class','add_category_name');
```
But this doesn’t really work.
March 4, 2017 at 2:41 pm #755605

Neverlands
Participant

Because your proposal changes the colour of all menu-text in the active sub-menu I treid this variation:

.active-parent-item > a > .avia-menu-text { color: #930270; }

This is working, but I need to set a different coulor for each main menu avia-menu-text.

Unfortunately the code below doesn’t work:

li#menu-item-214 .active-parent-item > a > .avia-menu-text { color: #930270; }

March 6, 2017 at 3:58 pm #756469
Yigit
Keymaster
Hi,

Please try changing your code to following one
```
li#menu-item-214.active-parent-item > a > .avia-menu-text { color: #930270; }
```
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

Best regards,
Yigit
March 6, 2017 at 4:19 pm #756480
Neverlands
Participant
Many thanks – this works perfectly!
The strange thing about is is that if I use the same code in the style.css it doesn’t work.
Even with an !important:
```
li#menu-item-214.active-parent-item > a > .avia-menu-text { color: #930270 !important; }
```
March 6, 2017 at 4:38 pm #756490

Yigit
Keymaster

Hi!

There might be some error in your code in style.css file. Can you please post the content of your style.css file here using – pastebin.com?

Best regards,
Yigit

March 6, 2017 at 4:49 pm #756497

Neverlands
Participant

Not sure what exactely I have to do with the pastebin.com..
Tried this: http://pastebin.com/kXs5estS

Line 2 works in the Quick CSS but not in the style.css – I’m using the Enfold Child Theme.

March 6, 2017 at 4:58 pm #756498

Yigit
Keymaster

Hey!

Please go to Appearance > Editor and open style.css file and copy it content and send us using pastebin.
I checked style.css file of the site linked in private content field, however it shows up empty.

Please copt the
Regards,
Yigit

March 6, 2017 at 5:12 pm #756502

Neverlands
Participant

As soon as I refreshed Appearance > Editor -> style.css all of the content disappeared.
Thank god I had a backup..

Here is the new pastebin: http://pastebin.com/7svrLbsN

March 6, 2017 at 5:30 pm #756511

Neverlands
Participant

Update:
Very interesting… since the style.css in the Appearance > Editor appeared to be empty although it was physically there I copied the content via the editor.
Since then all css-styles seem to be working as they should.

Many thanks!

March 6, 2017 at 5:38 pm #756514

Yigit
Keymaster

Hey!

You are welcome!

For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

Best regards,
Yigit
Author

Posts

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

The topic ‘Active menu olour having different menu colours’ is closed to new replies.