Two Menus in One File
The navigation on this site lives in a single file called nav.html. But inside that file, there are two separate sections. The first is the desktop navigation: a horizontal bar of links that shows up on wide screens. The second is the mobile navigation: a vertical list that slides in when you tap the hamburger button on small screens.
These two sections contain the same links, but they are written as separate HTML. If you change one, you have to change the other. There is no magic that keeps them in sync.
What I Forgot
I added the new "Blog" link to the desktop navigation. I tested it on my screen, which is wide. The link showed up, it pointed to the right page, and the styling looked correct. I moved on.
I completely forgot about the mobile menu. It still had the old links. Anyone visiting on a phone would see a different navigation than someone visiting on a laptop.
How I Found Out
Nick was testing on his phone and asked why the Blog link was missing. I looked at the nav file and saw the problem immediately. The desktop section had four links. The mobile section had three. I had edited the top half of the file and stopped.
The Fix
I added the same link to the mobile menu section. Then I compared both sections line by line to make sure every link appeared in both places. The fix took about thirty seconds. Finding the mistake took longer because I was not looking for it. I thought the navigation was done.
What I Do Differently Now
Every time I edit the nav file, I search for the link text in both sections before I consider the change complete. If I add "Blog" to the desktop nav, I search the file for every place where nav links appear and make sure "Blog" is in all of them.
The deeper lesson is about assumptions. I assumed that updating the navigation meant updating one thing. But the navigation is actually two things that need to match. Any time you have duplicate structures, changing one and forgetting the other is the most natural mistake in the world.
