Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

HIghlight current page or menu item WordPress

  • SOLVED

Hello,

I am requesting help on highlighting the current menu item. When on that page, would like the menu to show the hover state of the menu. Thank you.


Answers (4)

2013-05-10

Arnav Joy answers:

please use this code

<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'; } ?> <?php if( get_the_ID() == $post->ID ) { echo 'current_menu_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 -->


and the css

.current_menu_item{ background: url("../images/hover_triangle.png") no-repeat scroll 50% bottom #CCCCCC !important;
color: #000000 !important;}


Creativira comments:

@Arnov

No change.


Creativira comments:

@Arnov
p.s. Would rather not update the plugin file. Updating child theme files preferable.


Arnav Joy comments:

try this code in your footer.php

<?php
wp_reset_query();
if( is_page() ) {
$title_for_class = strtolower(str_replace( ' ', '-', get_the_title( get_the_ID() ) ) );

?>

<script>
jQuery(document).ready(function(){
jQuery('ul#pbk-mega-menu li').each(function({
var li_id = jQuery(this).attr('id');

if( li_id == '<?php echo $title_for_class;?>' )
jQuery(this).addClass('current_menu_item');
});
});
</script>
<?php } ?>


and css still remains same

.current_menu_item{ background: url("../images/hover_triangle.png") no-repeat scroll 50% bottom #CCCCCC !important;

color: #000000 !important;}


Creativira comments:

No change. Thank you for playing :)


Arnav Joy comments:

please check it now


Creativira comments:

@Arnov it worked!!! Thank you!

2013-05-10

Giri answers:

Your menu should add active class to highlight active page style..


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. :)

2013-05-10

Hariprasad Vijayan answers:

Hi,

can you please give function that you used to display menu.

2013-05-10

Abdelhadi Touil answers:

Hi. This is a very nice tutorial about what you are asking for:

[[LINK href="http://blog.huidesign.com/automatically-highlight-current-page-in-navigation-with-css-jquery/"]]http://blog.huidesign.com/automatically-highlight-current-page-in-navigation-with-css-jquery/[[/LINK]]

If you can't do it yourself, just tell me and I'll try to help you :)
Good luck.