WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Blog posts navigation (9 posts)

  1. paul448
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  3. paul448
    Member
    Posted 1 year ago #

    Thanks for replying Andrew

    Do I need to do this in the wordpress admin?

  4. Andrew
    Forum Moderator
    Posted 1 year 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 1 year ago #

    Hi Andrew

    Im not 100% sure what you mean??

    All of my blog posts are shown on a static page

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  7. paul448
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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.]

Topic Closed

This topic has been closed to new replies.

About this Topic