WordPress.org

1. paul448
   Member
   Posted 7 months ago #
   

   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

2. Andrew Nevins
   Volunteer Moderator
   Posted 7 months ago #
   

   Can you link a post or category page in which you want the 'Blog' anchor highlighted?

3. paul448
   Member
   Posted 7 months ago #
   

   Thanks for replying Andrew

   Do I need to do this in the wordpress admin?

4. Andrew Nevins
   Volunteer Moderator
   Posted 7 months ago #
   

   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.

5. paul448
   Member
   Posted 7 months ago #
   

   Hi Andrew

   Im not 100% sure what you mean??

   All of my blog posts are shown on a static page

6. Andrew Nevins
   Volunteer Moderator
   Posted 7 months ago #
   

   Can you post the link to one of your pages,
   that you want the navigation item highlighted?

7. paul448
   Member
   Posted 7 months ago #
   

   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

8. Andrew Nevins
   Volunteer Moderator
   Posted 7 months ago #
   

   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_Code

9. paul448
   Member
   Posted 7 months ago #
   

   Hi

   here are the url for pastebin:

   The blog Page:
   The Blog

   The blog post page:
   Post

   [No bumping. If it's that urgent, consider hiring someone.]

Reply

You must log in to post.