WordPress.org

Support

Support » Themes and Templates » WordPress Blog posts navigation

WordPress Blog posts navigation

  • Hi Folks

    I have the following navigation on my website:

    Home | About | Skills | Portfolio | Blog

    Here is the html:

    <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-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>

    When the user goes to a page, eg) Blog the link is highlighted with a background image.

    Here is the CSS:

    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;
    }

    What I am trying to work out is when the user clicks on a post or categories page or archives page I want the ‘Blog’ anchor link to remain highlighted with a different background.

    At the moment when you click on a post the selected active link doesn’t show.

    Hope the above makes sense?! Im not sure if there is a function I can use or if its simply the css?

    Any ideas any one?

    Thanks in advance

    Paul

Viewing 8 replies - 1 through 8 (of 8 total)
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘WordPress Blog posts navigation’ is closed to new replies.
Skip to toolbar