Skip to content

Conversation

@dohyeondk
Copy link

@dohyeondk dohyeondk commented Dec 6, 2025

Description

This PR fixes the intermittent navigation menu visibility issue reported in #1009.

Problem

Navigation menu items were sometimes invisible on desktop screens (width > 992px) due to a CSS rule that set opacity: 0 on nav items before the dropdown JavaScript loaded. If the JavaScript failed to load or was delayed, the menu items would remain invisible.

Solution

Removed the problematic media query that was hiding navigation items:

@media (min-width: 992px) {
    body:not(.is-dropdown-loaded) .gh-head-menu .nav > li {
        opacity: 0;
    }
}

This ensures navigation menu items are always visible regardless of JavaScript loading state.

Changes

  • Removed opacity transition dependency on .is-dropdown-loaded class
  • Updated compiled CSS files (screen.css, screen.css.map)

Testing

  • Tested on desktop screens (width > 992px)
  • Verified navigation items are now always visible
  • Confirmed no visual regressions

Fixes #1009


Note

Removes the CSS rule that hid desktop nav items before dropdown init, ensuring the menu is always visible, and updates the built CSS and source map.

  • CSS (navigation):
    • Remove media query in assets/css/screen.css that set opacity: 0 for .gh-head-menu .nav > li on desktop when body:not(.is-dropdown-loaded).
  • Build outputs:
    • Regenerate assets/built/screen.css and assets/built/screen.css.map to reflect the change.

Written by Cursor Bugbot for commit 0bb9bdd. This will update automatically on new commits. Configure here.

- Removed media query that set opacity: 0 on nav items before dropdown loaded
- Prevents flash of invisible content on larger screens
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant