highlighting header menu item when using conditional secondary menus

Graphene Theme Forum » Graphene Wordpress theme » Support

highlighting header menu item when using conditional secondary menus

(4 posts) (3 voices)

Started 2 months ago by danbailan
Latest reply from Syahir Hakim
This topic is closed
This topic is resolved

Skip to the latest post | RSS feed for this topic

danbailan
Member
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.
Posted 2 months ago #
Prasanna SP
Moderator
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;
}
```
Personal Website prasannasp.net | WordPress Plugins developed by me.
Graphene Child Theme Template | Graphene Theme Tutorials | WordPress tutorials.
Posted 2 months ago #
danbailan
Member

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

Posted 2 months ago #
Syahir Hakim
Developer

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

Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile and Graphene Mobile Neo!

Posted 2 months ago #

Topic Closed

This topic has been closed to new replies.