Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #209848

    Hi there,

    for a better orientation for the users of the website i would like to hold the ‘main menu item link’ active …even if they go to the sub menu page.

    I tried some things but maybe it is too late for me.

    Example:

    <div class="main_menu main_menu_menu_manager">
           <div class="menu-mymenu-container">
                <ul id="menu-mymenu" class="menu">
                    <li id="menu-item-100"
      		    class="menu-item menu-item-type-post_type menu-item-object-page
                        current-page-ancestor current-menu-ancestor current-menu-parent
    		    current-page-parent current_page_parent current_page_ancestor menu-item-has-children">
                        <a href="http://example.com/warehouse_1/">
                           <strong class="cufon_headings">
    	  		        WAREHOUSE_1
    		       </strong>
                        </a>
                        <ul class="sub-menu" style="display: block; opacity: 0; visibility: hidden;">
     		          <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page
    			       current-menu-item page_item page-item-2222 current_page_item">
    			       <a href="http://example.com/department_1/">
    			             DEPARTMENT_1			  
    			       </a>
              	          </li>
    		          <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page">
    			       <a href="http://example.com/department_2/">
    			             DEPARTMENT_2
    			       </a>
              	          </li>
                                                  /**  etc. menu-item-103 ...to... menu-item-120 = department_3 to department_20  */ 
    		  </ul>
    	      </li>
    	 </ul>
       </div>
    </div>

    In the event a user selects the sub-menu page DEPARTMENT_1 (id=menu-item-101) …and this page is loaded(!), the main-menu link WAREHOUSE_1 (id=”menu-item-100″) should get a highlighted color…and if possible the sub-menu link DEPARTMENT_1 also.

    (The hover effect isn’t the problem, this works fine.)

    Unfortunately by default you have the following result:
    If someone choose the sub-menu page DEPARTMENT_1 -> the main-menu link WAREHOUSE_1 (=strong class=”cufon_headings”) loses his active highlighted status and is afterwards in the same color as the other main menu links WAREHOUSE_* .

    Could someone help please in this case ?

    Thanks

    Blogwaeltler

    #209876

    Hi blogwaeltler!

    You should set the pages in hierarchies: http://en.support.wordpress.com/pages/page-attributes/

    Add this on custom.css or Quick CSS to highlight the current page item and the parent menu item:

    .current_page_item.current-menu-ancestor.current-menu-parent .current_page_item a {
    color: blue !important;
    }
    
    .current_page_item.current-menu-ancestor.current-menu-parent a strong {
    color: blue !important;
    }

    Cheers!
    Ismael

    #210046

    Thank you Ismael,

    with your post i saw the trick. Sometimes i can’t see the trees in the forest ;-).

    In my case i have had to use the following code:

    .menu .menu-item .current_page_item a  {
    color: blue !important;
    }
    
    .menu .menu-item.current_page_ancestor.menu-item-has-children a strong  {
    color: blue !important;
    }

    …and for hover effects:

    .menu .menu-item .current_page_item a:hover  {
    color: blue !important;
    }
    
    .menu .menu-item.current_page_ancestor.menu-item-has-children a:hover strong {
    color: blue !important;
    }

    Best regards,

    Blogwaeltler

    • This reply was modified 7 months, 2 weeks ago by  blogwaeltler.
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Main Menu item active while on Sub Menu page’ is closed to new replies.