Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #679919

    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;
    }
    #681329

    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

    #697835

    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?

    #697846

    @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;
    }
    #697850

    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

    #703817

    Hi Yigit,

    Please see here.

    Br
    ChangeGroup

    #704133

    Hi,

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

    Best regards,
    Rikard

    #704240

    Sorry!

    #706111

    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

    #706786

    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?

    #707530

    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

    #707651

    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

    #708543

    Hi,

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

    Best regards,
    Ismael

    #709771

    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

    #710154

    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

    #710169

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

    Br
    ChangeGroup

    #711149

    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

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.