I am trying to fix a problem with a submenu. I have coded (as you can see on jsfiddle: http://jsfiddle.net/8899x/87/ ) my horizontal menu and the submenu. I would like to leave the submenu opened when I am in the selected child page; for example if I click on "Gallery -> Photogallery 1", I'd like that the submenu and the "Photogallery 1" will stay opened and highlighted. Obvious the same if I click on "Photogallery 2" and so on.

Any help please?

UPDATED: Here is the example of my header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=0.1, maximum-scale=1.0"/>
global $page, $paged;

wp_title( '|', true, 'right' );

// Add the blog name.
bloginfo( 'name' );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";

// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
    echo ' | ' . sprintf( __( 'Page %s', '_s' ), max( $paged, $page ) );


<link href='http://fonts.googleapis.com/css?family=Open+Sans:800,400,600,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/vnd.microsoft.icon"/>
<link rel="icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-ico"/>

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>

<?php wp_head(); ?>


<body <?php body_class(); ?>>

<div id="wrapper" class="container">

<ul id="navbar">
    <li><a href="<?php bloginfo('url') ?>">Home</a></li>
    <li><a href="<?php bloginfo('url') ?>/?page_id=258"
        if ( is_page('258') || is_page('300') || ( !is_home() && in_category('5')) || ( !is_home() && in_category('58')) )
         echo " class=\"selected\"";
            <li><a href="<?php bloginfo('url') ?>/?page_id=258">Photogallery 1</a></li>
            <li><a href="<?php bloginfo('url') ?>/?p=256">Photogallery 2</a></li>
            <li><a href="<?php bloginfo('url') ?>/?page_id=300">Photogallery 3</a></li>
    <li><a href="events.php">Events</a></li>
    <li><a href="#">Blog</a>
        <ul class="submenu">
           <li><a href="personal.php">Personal</a></li>
           <li><a href="dev.php">Dev</a></li>
    <li><a href="#">About</a>
        <ul class="submenu">
           <li><a href="page1.php">Page 1</a></li>
           <li><a href="page2.php">Page 2</a></li>

<div class="clear"></div>

<div id="main">

And some lines of the singlecustompage.php:

<?php get_header(); ?>

<div id="full-content">
  • this is a css question, not WordPress
    – Milo
    Nov 3 '12 at 22:07
  • But this menu is for wordpress!! I putted it in the header and I do not know how can I manage the dynamic pages on WP when I change the page.
    – Mark
    Nov 3 '12 at 22:14
  • 2
    don't use static markup, use WordPress Navigation Menus.
    – Milo
    Nov 3 '12 at 22:31
  • I will try, thank you. But I think that I will ask here again for some help.
    – Mark
    Nov 3 '12 at 22:39

Within a WordPress framework, you can do this with a combination of body_class and CSS. body_class will echo classes into the <body> tag, including a page-parent class, which you can then use to control your elements. Without seeing your actual WordPress page, I can't give you the necessary CSS.

  • Thank you for the answer, I added the code of my header.php and the start of a custom page. Hope in some help.
    – Mark
    Nov 4 '12 at 7:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.