search

mozilla / bedrock

Making mozilla.org awesome, one pebble at a time
https://www.mozilla.org
Mozilla Public License 2.0
1.18k stars 916 forks source link

[Refresh] menus are misaligned when content appears above navigation #15315

Open alexgibson opened 4 days ago

alexgibson commented 4 days ago

Description

When content appears above the navigation, for example the cookie banner on some screen sizes - opening a menu results in it being aligned incorrectly.

Steps to reproduce

  1. In a browser with DNT/GPC disabled, open http://localhost:8000/en-US/products/vpn/?geo=de
  2. Resize the browser window to be less than 600px in height.
image

Next, hover over a navigation menu item.

Expected result

The navigation menu should be anchored to the navigation element.

Actual result

The menu is incorrectly anchored at an arbitrary height.

image

Environment

Chrome macOS

alexgibson commented 2 days ago

This is also an issue when the pencil banner is shown:

image
alexgibson commented 2 days ago

I haven't taken an in-depth look here, but it seems like the menu might need changing from position:fixed (which is always relative to the window) to position: absolute instead, so it can be positioned relative to the nav element.