WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Dynamic Menu Highligthing (1 post)

  1. p_9849
    Member
    Posted 1 year ago #

    Hi

    I am tying to highlight a menu item on my wordpress website when single posts are viewed.

    All of my blog posts are displayed on my static 'Blog' page.

    How can I highlight the 'blog' link when viewing a post page?

    Does anyone know of any functions that I can use that: when visiting a certain page highlight a certain menu item?

    My nav is called in the header.php file:

    <nav>
                 <?php wp_nav_menu( $args ); ?> 
    
            </nav>

    and my css is:

    header ul li a
          {
    border-radius: 4px;
        background-color: transparent;
        border: 1px solid transparent;
        color: #939393;
        margin: 0px;
        border-image: initial;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 3px;
        padding-bottom: 3px;
        font-size: 18px;
        text-decoration: none;
          }
    
        header ul li.current-menu-item a,
        header ul li a:hover
          {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -o-border-radius: 4px;
        -ms-border-radius: 4px;
        -khtml-border-radius: 4px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.042);
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin: 0;
        border-image: initial;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 3px;
        padding-bottom: 3px;
        color: #939393;
          }
    
        header ul li.selected {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -o-border-radius: 4px;
        -ms-border-radius: 4px;
        -khtml-border-radius: 4px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.042);
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin-top: -3px;
        border-image: initial;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 3px;
        padding-bottom: 3px;
        color: #939393;
         }

    The HTML generated is:

    <nav>
       <div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost:8888/paulkenyon/home/">Home</a></li>
       <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost:8888/paulkenyon/about/">About</a></li>
       <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost:8888/paulkenyon/skills/">Skills</a></li>
       <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/paulkenyon/portfolio/">Portfolio</a></li>
       <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://localhost:8888/paulkenyon/contact/">Contact</a></li>
       <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-50 current_page_item menu-item-52"><a href="http://localhost:8888/paulkenyon/blog/">Blog</a></li>
       </ul></div> 
    
            </nav>

    Please help!! I cant figure it out -spent hours trying to work it out :-/

    Thanks guys

    [closed as duplicate - continue with the original topic http://wordpress.org/support/topic/wordpress-single-page-categories-and-archives-menu-current-item?replies=1 ]

Topic Closed

This topic has been closed to new replies.

About this Topic