Menu button highlight when custom menu active in widget - Support

Tagged: highlight

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

Author

Posts
August 31, 2016 at 12:28 pm #679919
changegroup
Participant
Hi team Enfold,

We have a problem in relation to a former post: https://kriesi.at/support/topic/style-of-single-menu-button-item-link-to-submenu/

We have a Main Menu button (Investor Relations page), which is blue (#003366) with text being grey (#b7b7b7). When active the Main Menu button text turns white (#ffffff). But when we select one of the pages within the Custom menu in the left widget, the button turns grey (#b7b7b7).

All the pages within the Custom menu have the Investor Relations page as parent page. Though not the archive page (Meddelelser).

My question:
How can I get the Main Menu button to show text white (#ffffff), when the pages including archive page are active?

I use the following css to change color on button and button text color:
```
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
background: #003366;
color: #b7b7b7 !important;
font-style: bold;
border-color: #003366;
}
#top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text {
background: #003366;
color: #ffffff !important;
font-style: bold;
border-color: #003366;
}
```
I have formerly used this CSS to highlight text color on a Main Menu button, when a submenu and single portfolio pages were active:
```
#top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text, 
#top #wrap_all .header_color .av-menu-button-colored.current-menu-item > a > .avia-menu-text,
#top.single-portfolio #wrap_all .header_color .av-menu-button-colored > a > .avia-menu-text {
    background: #003366;
    color: #ef3e5b !important;
    font-style: bold;
    border-color: #003366;
}
```
September 2, 2016 at 3:42 pm #681329
Yigit
Keymaster
Hey changegroup,

Please change following code
```
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
background: #003366;
color: #b7b7b7 !important;
font-style: bold;
border-color: #003366;
}
```
to
```
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
background: #003366;
color: #ffffff !important;
font-weight: bold;
border-color: #003366;
}
```
Best regards,
Yigit
October 11, 2016 at 1:45 pm #697835

changegroup
Participant

Hi Yigit

I tried your suggestion but it didn’t help.

I want to have the ‘Investor Relations’ in top menu show that it’s active, when either of the ‘Investor Relations’ pages are active in the left widget (even when ‘Meddelelser’ – archive page – and the underlying posts are active):

– Investor Relations
– Meddelelser (archive blog page, with blog posts)
– Nøgletal
– Ejerstruktur
– Bestyrelsen
– Kontakt IR

Now ‘Investor Relations’ in top menu are only active, when ‘Investor Relations’ in widget are active.

How can I create this link?

October 11, 2016 at 1:59 pm #697846
changegroup
Participant
@yigit, please note, that ‘Investor Relations’ in top menu used to be a button, but is not any more.

Before the change, we had implemented these code to the button:
```
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
background: #2c4143;
color: #ffffff !important;
font-weight: bold;
border-color: #2c4143;
}
#top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text {
background: #2c4143;
color: #ffffff !important;
font-style: bold;
border-color: #2c4143;
}
#top #wrap_all .header_color .av-menu-button-colored> a:hover > .avia-menu-text, 
#top #wrap_all .header_color .av-menu-button-colored .current-menu-item > a > .avia-menu-text,
#top.single-portfolio #wrap_all .header_color .av-menu-button-colored > a > .avia-menu-text {
    background: #2c4143;
    color: #ffffff !important;
    font-style: bold;
    border-color: #2c4143;
}
```
October 11, 2016 at 2:02 pm #697850
Yigit
Keymaster
Hi,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Yigit
October 25, 2016 at 3:16 pm #703817

changegroup
Participant

Hi Yigit,

Please see here.

Br
ChangeGroup

October 26, 2016 at 6:50 am #704133

Rikard
Keymaster

Hi,

Thanks for the details though they don’t seem to be working, could you check/verify please?

Best regards,
Rikard

October 26, 2016 at 12:27 pm #704240

changegroup
Participant

Sorry!

October 31, 2016 at 1:09 pm #706111
Vinay
Inactive Moderator
Hi,

Please try adding this at the very end of your themes / child themes functions.php file:
```
// Highlight menu item
function currentMenuItem(){
?>
<script>
    jQuery(document).ready(function() {        
        jQuery('#menu-investor-relations .menu-item').each(function () {
            if (jQuery(this).hasClass('current-menu-item')) {
            	jQuery('#menu-item-7412').addClass('current-menu-item');
            }
        });   
    });
</script>
<?php
}
add_action('wp_footer', 'currentMenuItem');
```
Best regards,
Vinay
November 1, 2016 at 4:55 pm #706786

changegroup
Participant

Awesome work @vinay

How can I get this to work on ‘Promising Pratice’ and the underlying blog posts:

Promising Practice menu and page:
http://www.changegroup.dk/faglighed-og-promising-practices/

Example of blog post in ‘Pomising Pratice’:
http://www.changegroup.dk/agil-transformation/

What should I change in the code above?

November 3, 2016 at 5:48 am #707530
Ismael
Moderator
Hi,

We modified the functions.php file but we caused an error taking the site down. Please remove the code in the functions.php file via FTP. We are very sorry for the inconvenience. Once the site is up, add this code in the functions.php file:
```
add_filter( 'body_class', function( $classes ) {
	if(has_category('promising-practices')) {
		$classes = array_merge( $classes, array( 'promising-practices' ) );
	}
    return $classes;
});
```
And this css code in the Quick CSS field:
```
.promising-practices #header .av-main-nav > #menu-item-5520 > a .avia-menu-text {
    color: red;
}
```
Best regards,
Ismael
November 3, 2016 at 10:14 am #707651

changegroup
Participant

Hi Ismael,

No problem – these things happen…

I have done as described above, but it didn’t seem to work on my end?

Br
ChangeGroup

November 5, 2016 at 5:36 am #708543

Ismael
Moderator

Hi,

Thank you for the update. We modified the code a bit. Please check the post now.

Best regards,
Ismael

November 8, 2016 at 1:42 pm #709771

changegroup
Participant

Hi Ismael,

The only thing missing, is highlight of the line below text ‘Promising Practice’ in menu. It’s missing or disappears when blog posts are active.

Br
ChangeGroup

November 9, 2016 at 10:41 am #710154
Ismael
Moderator
Hi!

Thank you for the update. Please add this code below the previous one.
```
.promising-practice #header .av-main-nav > #menu-item-5520 > a > .avia-menu-fx {
    opacity: 1;
    visibility: visible;
}
```
Best regards,
Ismael
November 9, 2016 at 11:32 am #710169

changegroup
Participant

Perfect!
Thanks a lot for the help Ismael and Vinay!

Br
ChangeGroup

November 11, 2016 at 2:46 pm #711149

Andy
Inactive Moderator

Hi,

glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

Best regards,
Andy
Author

Posts

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

The topic ‘Menu button highlight when custom menu active in widget’ is closed to new replies.