WordPress.org

1. Josh M.
   Member
   Posted 2 years ago #
   

   Hello,

   I am building a theme: http://wp-themes-and-plugins.com/ and am trying to highlight the current page ( active ) in the top navigation menu. I'm using the ( 3.0 menu system )

   For functions.php - code I'm using: `<? if (function_exists('add_theme_support')) {
   add_theme_support('menus');
   } ?>`

   For the header.php - code I'm using: <?php wp_nav_menu('menu=main_menu'); ?>

   I can not seem to get the current page menu title to highlight when active. I've used resources from several different sources that provide tutorials on doing this - none of them work for me.

   Resources I've tried:

   • Design is Philosophy
   • OMBU
   • WordPress Codex

   Any assistance will be very much appreciated.

   Thanks in advance

2. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   if you look into the html code in your browser, and examine the css classes of the active link, for instance of the 'blog' page:
   

   <li id="menu-item-7" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-2 current_page_item current_page_parent menu-item-7"><a href="http://wp-themes-and-plugins.com/blog/">Blog</a></li>

   you will find a few css classes; for instance:

   .current-menu-item
.current_page_item

   which you can use to style the active menu item; for instance:
   .current-menu-item a { background: green; }

   another useful resource = free tool:

   firefox web developer add-on

3. Josh M.
   Member
   Posted 2 years ago #
   

   Hello alchymyth, thanks for you help.

   I am using ff web developer & fire bug - and also I have used the classes you mentioned above, but for some reason the current page still isn't highlighting.

   I've tried many variations, you can see it "not" working by clicking one of the links: http://wp-themes-and-plugins.com/products-page/ - if you want I will post wp-admin credentials for your testing.

   You can see the classes added to my stylesheet,

   Please advise...

4. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   it seems to be a hierarchy issue, with some other style overpowering the 'simple' current styles;

   however, these styles seem to work:

   #topnav li.current-menu-item a { background-color:#B2C629; }
   #topnav li.current_page_item  a { background-color:#B2C629; }

5. Josh M.
   Member
   Posted 2 years ago #
   

   Worked perfectly - thanks

6. ivanjunge
   Member
   Posted 2 years ago #
   

   I love it! For me the container is called topMenu. You can change the background image with it like this too:

   #topMenu li.current-menu-item a {
   display:block;
   float:left;
   background:url('images/menu_002_h.jpg') repeat-x;
   color:#fff;
   text-transform:uppercase;
   font-size:11px;
   font-weight:bold;
   line-height:35px;
   border:solid #e1e1d3;
   border-width:1px 1px 0 0;
   text-decoration:none;
   padding:0 25px;
   }

7. e.novak.paul@gmail.com
   Member
   Posted 1 year ago #
   

   Hi.

   This is really sound advice, but does anyone know how to make it so each menu item can be highlighted a different colour each?

   e.g

   menu item 1 orange on page 1
   menu item 2 brown on page 2
   menu item 3 grenn on page 3

   and so on...

Topic Closed

This topic has been closed to new replies.