Home › Forums › Graphene WordPress theme › Support

highlighting header menu item when using conditional secondary menus

  • danbailan

    March 2, 2013 at 11:42 am #6953

    Sorry I posted this int he general chat area first – it should be here

    My site is here and I am returning to a problem I still have not solved!

    http://theguidekohchang.hosting5.idnet.net

    I would like to have for example koh chang in the header menu styled/highlighted/selected whatever whenever the secondary menu is is use for koh chang, so when you click in koh chang secondary menu , you always know you are in koh chang from the header-menu button being selected/highlighted.

    And of course this to work for the other header menu items and their secondary menus.

    I have worked out the css classes in t he menus, the targettign fo the sidebar widgets all to style the different sections of the site but I am stumped as to the header menu showing selected

    Is there a way to keep the primary header menu item highlighted, say island a, when you are using the secondary menu/dropdown for that category? I can get it to work with css so in the secondary menu if you select sleep, say, and then use the drop down, then the page you click on is highlighted as well as sleep, but what I really want is island a to be highlighted as well, so the user can see the progression down through the menu/hierarchy…

    This is the code used to create the menus

    register_nav_menus( array(
    
'secondary-menu-one' => __( 'Secondary Menu (one)', 'graphene' ),

    and

    if ( is_page(267))
    
$args = array_merge( $args, array( 'theme_location' => 'secondary-menu-one' ) );
    
return $args;
    
}
    
add_filter( 'graphene_secondary_menu_args', 'graphene_multiple_secondary_menu' );

    Thanking you in advance for any insights and help.

    Anonymous

    March 3, 2013 at 3:03 pm #36317

    Add some class to <body> tag when that particular page is loaded and then apply some Custom CSS to highlight the parent menu item in header-menu.

    Something like this?

    function 267_page_body_class( $classes ){
    
if ( is_page(267)) {
    
$classes[] = 'has-koh-chang-secondary-menu';
    
}
    
return $classes;
    
}
    
add_filter( 'body_class', '267_page_body_class' );

    Then Custom CSS.

    .has-koh-chang-secondary-menu #header-menu > li.kohchang > a {
    
color: #000 !important;
    
background: #123456 !important;
    
}

    danbailan

    March 16, 2013 at 4:11 am #36318

    Many thanks for coming back to me Prasanna – sorry for the slow reply.

    I solved the problem in the end just with css and parent/child. Basically I made the pages all children of the koh chang page and then used

    #header-menu > li.kohchang.current-menu-item > a, #header-menu > li.kohchang.current-menu-ancestor > a, #header-menu > li.kohchang.current-page-ancestor > a

    to do the highlighting

    and in the secondary menu used

    #secondary-menu > li.kohchang.current-menu-ancestor > a

    It seems to work now but I have hopefully taken on board your suggestion to and think I get it.

    Many thanks again

    Admin

    Syahir Hakim

    March 16, 2013 at 8:35 am #36319

    Marking thread as resolved. You can do this yourself as well.

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

  • You must be logged in to reply to this topic.