HIghlight current page or menu item WordPress

Giri comments:

Can you post your navigation menu code?

Creativira comments:

The css code
ul#pbk-mega-menu {
position: relative;
margin: 0;
padding: 0;
}

ul#pbk-mega-menu > li {
float: left;
list-style-type: none;
z-index: 50;
}

#pbk-mega-menu > li > a {
display: block;
text-decoration: none;
padding: 9px 25px 7px;
color: #EEEEEE;
height: inherit;
}

ul#pbk-mega-menu > li.drop-item > a span {
background: url(images/drop-item-arrow.png) no-repeat right 50%;
padding-right: 15px;
}


#pbk-mega-menu li:hover div {
left: 0;
}

#pbk-mega-menu > li:hover > a {
background: transparent url(images/hover_triangle.png) no-repeat 50% bottom;
color: #FFFFFF;
}

div.drop {
position: absolute;
background-color: #FFFFFF;
left: -9999px;
padding: 20px 0;
z-index: 500;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0);
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.35);
-moz-box-shadow: 0 5px 5px rgba(0,0,0);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,.35);
box-shadow: 0 5px 5px rgba(0,0,0);
box-shadow: 0 5px 5px rgba(0,0,0,.35);
border: 1px solid #DDDDDD;
border-top: none;
width: 99.8%;
}

div.drop-content {
overflow: hidden;
display: block;
padding: 0 20px;
}

div.drop-content .gallery-item {
float: left;
margin: 5px;
}

.clear {
clear: both;
}

/* WIDTH OPTION STYLES
------------------------------------------------------------ */


li.drop160, li.drop320, li.drop480, li.drop640, li.drop800 {
position: relative;
}

li.drop160 .drop {
width: 160px;
}

li.drop320 .drop {
width: 320px;
}

li.drop480 .drop {
width: 480px;
}

li.drop640 .drop {
width: 640px;
}

li.drop800 .drop {
width: 800px;
}


/* ========== Short Code Default Styling =========== */

h3.pbk-col-title {
font-size: 1.3em;
font-weight: bold;
}

/* Halves */

div.half {
float: left;
width: 45%;
padding: 1%;
margin-right: 3%;
margin-bottom: 10px;
}

/* Thirds */

div.one-third {
display: block;
float: left;
width: 29%;
height: inherit;
margin-right: 3%;
padding: 1%;
}

div.two-thirds {
float: left;
width: 63%;
padding: 1%;
height: inherit;
margin-bottom: 10px;
}

/* Quarters */

div.one-quarter {
float: left;
width: 21%;
margin-right: 3%;
padding: 1%;
margin-bottom: 20px;
}

div.divider-line {
display: block;
clear: both;
height: 1px;
width: inherit;
background-color: #DDDDDD;
margin: 20px 0;
}

.leftalign {
float: left;
margin: 0 20px 20px 0;
}

.rightalign {
float: right;
margin: 0 0 10px 20px;
}

div.last {
margin-right: 0;
}

Giri comments:

Hi i'm not asking css code.. I'm asking the php code.

Creativira comments:

The functions or the options file?

Giri comments:

header.php file.

Just copy and paste the code that wrapped within this code

<div id="pbk-mega-wrap">



</div>

Creativira comments:

Thanks for the specifics.
<div id="pbk-mega-wrap">
<ul id="pbk-mega-menu">
<?php // If home link is set, show a home link in the menu
if ($home_link && $home_link = 'true') : ?>
<li id="home"><a href="<?php echo home_url( '/' ); ?>" rel="home">Home</a></li>
<?php endif; ?>

<?php while ( $pbk_mega_menu->have_posts() ) : $pbk_mega_menu->the_post();
$title_for_class = strtolower(str_replace( ' ', '-', get_the_title() ));

// Assign meta values to variables for easier use.
$drop_width = get_post_meta($post->ID, 'pbk_drop_width', true);
$new_window = get_post_meta($post->ID, 'pbk_new_window', true); ?>


<?php /* Set up the menu item and add classes based on configurable options as well as if the item has a link to address or associated content */?>
<li class="<?php echo get_option("pbk_mega_menu_class_name"); ?>-<?php echo $counter; ?><?php if ($drop_width != "full") {echo ' ' . $drop_width;} ?> <?php if($post->post_content) { echo 'drop-item'; } ?>" id="<?php echo $title_for_class ?>">
<a href="<?php if(get_post_meta($post->ID, 'pbk_link_to', true)){echo get_post_meta($post->ID, 'pbk_link_to', true);} else {echo '#';} ?>" <?php if($new_window == 'true') {echo 'target="_blank"';} ?> ><span><?php the_title(); ?></span></a>

<?php // If content has been entered for the item, show the dropdown ?>
<?php if($content = $post->post_content ) : ?>
<div class="drop <?php echo $pbk_align; ?>">
<div class="drop-content">
<?php the_content();?>
</div><!-- .drop-content -->
</div>
<?php endif; ?>

</li><!-- End of List Item -->


<?php $counter++; ?>

<?php endwhile; else: ?>
<?php wp_page_menu(); ?>
<?php endif; ?>

<?php wp_reset_query(); ?>

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

</ul><!-- #pbk-mega-menu -->
</div><!-- #pbk-mega-wrap -->


Giri comments:

I think you are using a plugin to generate that menu. So lets use javascript to add class.

<script>
$( document ).ready(function() {
$("#pbk-mega-menu li").click(function(){
if ($("li").hasClass('active')) {
$("li").removeClass('active');
}
$(this).addClass('active');
});
});
</script>

Now add this in css file.

li.active > a {
background: #CCCCCC;
color: #000000;
}

Giri comments:

Add that javascript in footer.php

Small fix

<script>
$( document ).ready(function() {
$("#pbk-mega-menu li").click(function(){
if ($("#pbk-mega-menu li").hasClass('active')) {
$("#pbk-mega-menu li").removeClass('active');
}
$(this).addClass('active');
});
});
</script>

Giri comments:

Small fix for css

#pbk-mega-menu li.active > a {
background: #CCCCCC;
color: #000000;
}

Creativira comments:

I've added the code above to footer.php and custom.css. No highlight yet.

Giri comments:

I guess you are having jquery conflict. So try like this

<script>
jQuery(document).ready(function($) {
$("#pbk-mega-menu li").click(function(){
if ($("#pbk-mega-menu li").hasClass('active')) {
$("#pbk-mega-menu li").removeClass('active');
}
$(this).addClass('active');
});
});
</script>

Creativira comments:

Still no change. Placed this code before the ending </body>

Creativira comments:

@Viruthagiri,
This has been solved. Thank you for your efforts!

Giri comments:

Hi the menu you are using is a simple menu. So instead of using all those codes just use this one.

Create a menu called "Navigation" then use this code

<?php wp_nav_menu( array(
'menu' => 'Navigation',
'menu_id' => 'pbk-mega-menu',
'container' => 'div',
'container_class' => '',
'container_id' => 'pbk-mega-wrap',
) ); ?>

Giri comments:

If that has been solved then never mind. :)