Summary

The navigation bar exhibits inconsistent styling behavior across different viewport sizes due to conflicting CSS rules in style.css. The mobile media query (@media max-width: 768px) overrides critical design elements, resulting in a broken user interface that deviates from the intended frosted glass aesthetic.

Problem Description

Current Behavior

When the viewport width is ≤768px, the navbar styling changes dramatically:

• Background: Changes from dark semi-transparent gradient to solid bright blue (#007bff)
• Positioning: Shifts from centered (left: 50%, transform: translateX(-50%)) to off-center (left: 20%, width: 85%)
• Visual Effects: Loses frosted glass effect (backdrop-filter: blur(10px))
• Border Radius: Loses rounded corners (border-radius: 15px)
• Layout: Switches to flex-direction: column, disrupting navigation structure

Expected Behavior

The navbar should maintain consistent visual appearance across all screen sizes while adapting its layout responsively. The frosted glass effect, rounded corners, and dark theme should persist regardless of viewport dimensions.

Technical Analysis

Root Cause

Location: style.css lines 132-151

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    background: linear-gradient(to right, rgba(128, 128, 128, 0.5), rgba(64, 64, 64, 0.5));
    position: fixed;
    top: 0;
    left: 20%;  /* Issues: Off-center positioning */
    width: 85%;
    align-items: stretch;
    height: auto;
    z-index: 100;
    padding: 1rem;
    background-color: #007bff;  /* Issues: Bright blue overrides gradient */
  }
}

Issues Identified

1. Conflicting background properties: Both gradient and solid color defined
2. Missing frosted glass effect: backdrop-filter removed in media query
3. Missing border-radius: Rounded corners not preserved
4. Improper positioning: Off-center layout (left: 20% instead of 50%)
5. Incorrect flex-direction: Column layout breaks horizontal navigation

Proposed Solution

Modify the mobile media query to maintain design consistency:

@media (max-width: 768px) {
  .container {
    /* Preserve visual identity */
    background: linear-gradient(
      to right,
      rgba(10, 10, 10, 0.7),
      rgba(10, 10, 0.7)
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Responsive positioning */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    
    /* Mobile-optimized layout */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    z-index: 1000;
  }
  
  .radio-wrapper {
    min-width: auto;
    flex: 0 1 auto;
  }
  
  .btn {
    padding: 8px 12px;
    font-size: 14px;
  }
}

Benefits

✅ Maintains brand consistency across all devices
✅ Preserves frosted glass aesthetic on mobile devices
✅ Improves user experience with consistent navigation
✅ Ensures proper centering on all screen sizes
✅ Maintains accessibility and readability

Related Issues

This issue is related to #1455 and addresses similar navbar inconsistency concerns.

Environment

• Browser: Chrome 131.0, Firefox 133.0, Safari 18.0
• Screen Sizes Affected: 320px - 768px (mobile/tablet)
• Pages Affected: All pages (index.html, contact.html, about.html, etc.)

Screenshots

Desktop view (working correctly): Frosted glass navbar with rounded corners
Mobile view (current bug): Bright blue boxed navbar without effects

Priority

This is a High Priority bug as it affects:

• User experience across mobile devices
• Brand consistency and visual identity
• Overall site aesthetics and professionalism

Willingness to Contribute

I am prepared to submit a pull request with the proposed fix if this issue is approved.