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
-
Can you link a post or category page in which you want the ‘Blog’ anchor highlighted?
Thanks for replying Andrew
Do I need to do this in the wordpress admin?
I don’t think so, you should be able to view the post or category webpage, then copy the URL at the top of your browser and paste it here.
Hi Andrew
Im not 100% sure what you mean??
All of my blog posts are shown on a static page
Can you post the link to one of your pages,
that you want the navigation item highlighted?Im working locally on my site, so cant send you a link unfortunately.
My Blog url at the moment is: http://localhost:8888/paulkenyon/blog/
An example blog post: http://localhost:8888/paulkenyon/this-is-an-example-blog-post/
What I am trying to achieve is when you view a post page the blog page menu is highlighted, at the moment nothing happens.
Thanks for your help
Can you use http://pastebin.com and paste there your HTML and CSS for that, “example blog post” page, then link us the Pastebin webpage created?
Here’s more instructions on how to use Pastebin
http://codex.wordpress.org/Forum_Welcome#Posting_CodeHi
here are the url for pastebin:
The blog Page:
The BlogThe blog post page:
Post[No bumping. If it’s that urgent, consider hiring someone.]
- The topic ‘WordPress Blog posts navigation’ is closed to new replies.