b82bce91b10725b252a3ead15ba68cb0700d997a
max
  Thu Sep 17 02:12:25 2026 -0700
Stop the narrow-screen menu icon from covering the menu bar items, refs #38251

#Preview2 week - bugs introduced now will need a build patch to fix
The previous fix put the icon at position:sticky with float:right so that it would
follow the right edge of the window while the 1000px-wide bar is scrolled sideways.
Sticky only moves an element that is in the normal flow, and that turned out to be
the problem: the float sits in the same line as the menu items, so at some widths
they wrap out of the 32px-high bar and their labels are drawn below it on white,
and as the window narrows the icon sweeps leftwards across the items and hides
whichever one is under its opaque background.

Leave the icon where the rest of the bar is instead, at the right-hand end, which
is what the rule for wide windows already does.  On a window narrower than the
bar it is reached by scrolling sideways, exactly like the "Help" and "About Us"
items next to it.  It is moved 8px closer to the edge than on wide windows because
the static pages draw "Home" as the 84px UCSC logo rather than the 23px house icon,
which leaves the menu ending only 29px short of the icon.

Measured the bar on hgGateway, the home page, hgTracks and hgTrackUi at thirteen
widths from 390 to 1400px: the icon is inside the bar everywhere, the menu stays on
one row, and the gap between the last item and the icon is never less than 17px.
Hovering "About Us" at 850px on hgTracks, which used to blank every label in the
bar, no longer does.

diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css
index 15ab0ad8d4a..9bd5159c172 100644
--- src/hg/htdocs/style/nice_menu.css
+++ src/hg/htdocs/style/nice_menu.css
@@ -66,46 +66,49 @@
 }
 #topRightLinks a.topRightLink {
 	color:#fff;
 	margin-left:18px;
 	text-decoration:none;
 	font-family: Arial,Helvetica,sans-serif;
 	font-size:13px;
 }
 #topRightLinks a.topRightLink:hover {
 	text-decoration:underline;
 }
 /* Hamburger toggle: hidden on wide screens (links shown inline); shown on narrow screens below. */
 #trToggle {
 	display:none;
 }
-/* Narrow / phone screens: the fixed-width (min 1000px) bar scrolls horizontally, so links pinned
-   to the right edge of the bar end up off-screen.  Instead collapse them into a menu icon that
-   sticks to the right edge of the visible part of the bar, and show the links as a dropdown when
-   it is tapped.  "sticky" rather than "fixed": fixed pins to the top of the window, which is
-   inside the bar only on hgTracks - on pages with a logo banner above the bar (hgGateway, the home
-   page) it lands in the white area above it. */
+/* Narrow / phone screens: below about 1100px the two links no longer fit beside "About Us", so
+   collapse them into a menu icon and show the links as a dropdown when it is tapped.  The icon
+   keeps the position of the rule above, the right-hand end of the bar.  The bar is min-width
+   1000px, so in a narrower window that end is reached by scrolling sideways - the same as for
+   the "Help" and "About Us" items sitting next to it.
+   Do not pin the icon to the window instead.  Both ways of doing that have been tried and both
+   broke the bar: "fixed" pins it to the top of the window, which is inside the bar only on
+   hgTracks and lands in the white logo area above it on hgGateway and the home page, and
+   "sticky" only moves an element that is in the normal flow, where it makes the menu items wrap
+   out of the 32px-high bar and drags its opaque background across whichever item it is over.
+   refs #38251 */
 @media (max-width: 1100px) {
 	#topRightLinks {
-		position:sticky;
-		float:right;
-		top:auto;
-		right:14px;
-		height:32px;
-		line-height:32px;
-		padding:0 8px;
-		background:inherit; /* the bar's blue */
+		/* Tighter against the right edge than the wide-screen rule: on the static pages the
+		   "Home" item is the 84px UCSC logo rather than the 23px house icon, so the menu runs
+		   to x=971 of the 1000px bar and the icon has little room left. */
+		right:6px;
+		padding:0 6px;
+		background:inherit; /* the bar's blue, so that #trLinks below can inherit it in turn */
 		z-index:1000;
 	}
 	#trToggle {
 		display:inline-block;
 		background:none;
 		border:0;
 		color:#fff;
 		font-size:20px;
 		line-height:32px;
 		cursor:pointer;
 		padding:0;
 	}
 	/* The links hang below the icon.  They are taken out of the flow so that opening the menu
 	   does not make the bar taller and push the rest of the page down. */
 	#trLinks {