SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Navigation Focus on Current Page

    Hey Guys,

    Was wondering if theres a way to do this with CSS my site uses php for the header/navigation and its a Wordpress site.

    What I'm looking to do is highlight the section your in on the navigation.

    Here is the site...

    http://keatinginc.ca

    For example say you roll over Commercial when you go to the sub nav of commercial I still want the Commercial to be in orange and with the triangle thing there then say you click Asbestos Abatement/Testing and go to that page if on the main nav at the top Commercial will still stay highlighted in the orange with the triangle next to it and also on the sidebar in Other Commercial Services I would like the actual child page the Asbestos Abatement/Testing to remain orange with the triangle on it.

    Is this easily acheivable to do with this current website.

    Thanks in advance you guys rock!!!,

    Mike

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    What happens if you add the red bit to the CSS?

    Code:
    #nav li a:hover, #nav li.wpm-hover > a {
      background: url("../images/nav-hover.png") no-repeat scroll 0 0 #FFFFFF;
      color: #F27A2D;
    }

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That works nicely for this first part now just for the focus on that current parent and page your on say if your at this page...

    http://keatinginc.ca/commercial/asbe...tementtesting/

    I'm looking to have in the top navigation "Commercial" in the orange with the icon next to it so it shows that your in the "Commercial" section and in the sidebar the "Asbestos Abatement/Testing" would be highlighted in the orange with the triangle next to it.

    Thanks,

    Mike

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    This is kind of easy with a static site, but not sure of the technicalities with a WP site. But you can, for example, place a class like class="comm" on the body element of all pages in the Commercial section, and on the Commercial link:

    Code:
    <a class="comm">Commercial</a>
    and then create an extra rule like this for the main menu:

    Code:
    .comm #nav li.wpm-hover a.comm {
      background: url("../images/nav-hover.png") no-repeat scroll 0 0 #FFFFFF;
      color: #F27A2D;
    }
    But this is probably better done with PHP in this case. Here is an example of using PHP to highlight current links:

    http://www.sitepoint.com/forums/show...=1#post5091766

    Or you could also take the easy route and use JavaScript:

    http://css-tricks.com/snippets/jquer...-current-page/

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The CSS way didnt seem to work at all, can you take a look at the page did it for the Commercial items and pages, maybe I'll have better luck with the Jacascript but would really like to do it using CSS

  6. #6
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, I got it working using the Javascript but only got it working on the main navigation and for some reason the text wont stay orange any reason?

    And even though the sub-nav has the .selected class it does not show up with the background picture...

    Heres link to the page...

    http://keatinginc.ca/commercial/asbe...tementtesting/

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, got the sub nav working now, but for some reason the text doesnt change colour on the active page even though I have the text-colour changing in the CSS, any ideas why?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, you aren't quite targeting the right elements there. Try making these changes:

    Instead of this:

    Code:
    .selected {
      color: #F27A2D !important;
    }
    change to:

    Code:
    .selected > a {
      color: #F27A2D !important;
    }
    And instead of this:

    Code:
    .current_page_item {
      color: #F27A2D !important;
    }
    change to:

    Code:
    .current_page_item a {
      color: #F27A2D !important;
    }
    Those rules were targeting the parent list items instead of the actual <a> elements you need to style.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •