Menu disappears

HTML & CSS
1

When you click the “About” link in the menu, then scroll upwards the About link disappears from the menu. Same thing happens with Contact. Any ideas?

http://ksm.fm/misc/direction-through-divorce/

2

Works OK for me in Chrome. More info? Browser?

3

Apologies, Firefox 23

4

On Firefox 32, it works OK with JS disabled, but the links disappear when JS is enabled…

5

For me it works when Javascript is enabled

6

May I ask why you are only still using FF23? I thought all modern browsers had automatic updates now? EIther way you are 9 versions behind…

7

Hi thanks for the responses… I’ve updated my browser to FireFox 32.0.3 and I am still seeing the same issue. Check this new link, I actually have two issues:

  1. Load the URL below and click the “About” in the menu. Then scroll with your mouse to the top of the page and you will see the “About” menu disappear or turn white. This does it for all menu items.

  2. Also under the main image is a band of purple with large text and two links… both of these links direct to a div underneath it, however its scrolling down too far and cutting off the header and intro text of each section. Is there an adjustment I have to make to a div or is it a javascript easing issue?

http://directionthroughdivorce.com

9

I didn’t reply since I couldn’t recreate problem #1.
2) Probably a Javascript issue. It’s technically working but you need to make it go down X amount of pixels, where X = the header height that’s cutting off the text (if that makes sense)

10

When you click the button it gets focus and becomes the current item and gets a current class. When you scroll back up with the mouse (or scrollbar) the js removes the class of current but the element is still in focus and gets this:rule:

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: transparent;
color: #fff;
}

That sets it to white which is the same as the background so you can’t see it.