SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    652
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Current Page Highlight Not Working

    Hey Guys,

    Ok so just having a minor issue with the site I am currently working on. In the main navigation I'm able to make the current or selected page highlighted differently from the other links in the navigation but on my interior pages in the subnavbar it doesn't highlight when I try to do it.

    Here is a page..

    http://modocom.ca/lmi/industrial-fab.../capabilities/

    What I want in the subnavbar is the current page to be highlighted so Capabilities shpould be highlighted I just want it white text with no underline just for the current/selected page.

    Tried to do this but just wouldnt work as you can tell in my CSS I have

    Code:
    .subnavbar .selected a {
      	color: #FFF !important;
      	border: none !important;
    }
    
    .subnavbar .current_page_item  {
    	color: #FFF !important;
      	border:none !important;
    }
    If someone could give me a hand that would be great.

    Thanks,

    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You need to target the anchor not the list element.

    e.g.
    Code:
    .subnavbar .current_page_item a {
    	color: #FFF;
      	text-decoration:none;
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Firstly, don't use !important, as it's a real cop out, and should only be used in emergencies (like when you don't have full control over the code—say when you have plugins from Google etc.).

    Your first rule won't work because there is no "selected" class above the <a>. The second rule doesn't work because it targets the LI, while the color is actually on the <a>. You can fix it by doing this (targeting the <a>):

    Code:
    .subnavbar .current_page_item a {
    	color: #FFF;
      	border:none;
    }
    Edit:

    Pipped!

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    652
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks!!! Works perfectly now!!!

    One more question now on the homepage...

    http://modocom.ca/lmi/

    In Chrome and FireFox the We Spark Progress my h5 tag looks correctly with the correct font using font-face, but when I look at it in Safari and mobile devices it doesn't show that font, how can I fix this?

    Thanks,

    Mike

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    652
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Anyone any idea on how to change this I've tried several different ways, but it either messed it up or just only works in Chrome.


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
  •