SitePoint Sponsor

User Tag List

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

    Navigation Not Working

    Ok, am working on this site and the Navigation is not working at all. You can't click on anything in the main Navigation and as well the text should change colour nicely when hovering over but does not do it on this.

    http://freshtastik.ca/modo/

    Thanks,

    Mike

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I see that you are giving items in your navigation H1s? why?

    This is what's causing your non selectable nav:

    .menu:after {

    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    }

    your pseudo element is covering your entire MENU, thus preventing the mouse event from registering.

    I'd recommend giving the ANCHORS position:relative and display:block; , and then changing the rule to:
    .menu a:after {...}

    Hope that helps.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    636
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect now only issue I'm having is when on the selected and current page the text stays orange which is correct but the icon next to it is still the grey pic I tried to use background position but didn't work. Any ideas?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try adding this to your CSS:

    Code:
    .catering.selected {
      background-position: 0 -50px;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    636
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nope that didnt work. Thanks though.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Nope that didnt work. Thanks though.
    It's not in your style sheet. Could you leave it there for now? It works for me when I add it in.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    In IE8, the icons are always orange, text defaults to black; the text is orange on :hover and for the active page.

    In FF17, the icons and text default to black; icon and text turn orange on :hover; text remains orange, but icon turns black when the page is active.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    In IE8, the icons are always orange, text defaults to black; the text is orange on :hover and for the active page.

    In FF17, the icons and text default to black; icon and text turn orange on :hover; text remains orange, but icon turns black when the page is active.
    Yes, a better option would be to set the background image on the <a>, and shift the position when

    1) the <a> is hovered and

    2) when the <a> is in a <li> with the .selected class ... such as

    Code:
    a:hover, .selected a {
    
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

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

    .catering.selected {
    background-position: 0 -50px;
    }

    Worked well for me I forgot to put the ed on selected lol.

    I dont got IE so cant see it in it.

    Thanks

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    FYI: Screenshots - Menu(active) Jobs(hovered)

    IE8 - - - - - - - - - - - - - FF17

    IE8_Menu(a)_Jobs(h).jpg - FF17_Menu(a)_Jobs(h).jpg


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
  •