Navigation Not Working

[mbond5]

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

[dresden_phoenix]

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.

[mbond5]

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?

[ralph.m]

Try adding this to your CSS:

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

[mbond5]

Nope that didnt work. Thanks though.

[ralph.m]

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.

[ronpat]

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.

[ralph.m]

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

a:hover, .selected a {

}

[mbond5]

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

[ronpat]

FYI: Screenshots - Menu(active) Jobs(hovered)

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

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