src/hg/htdocs/style/nice_menu.css 6e89bb12a35c65c0607719f2aa2c7377803d09f9

6e89bb12a35c65c0607719f2aa2c7377803d09f9
max
  Fri Sep 4 14:03:07 2026 -0700
Keep the top-right Login/Share a link menu icon inside the blue bar on narrow windows.

On screens under 1100px the icon was positioned with position:fixed, which pins it
to the top of the window.  That is the top of the blue bar only on hgTracks; on
hgGateway and the home page the bar sits below the logo banner, so the icon showed
up in the white area above it.  Use position:sticky instead, which keeps the icon in
the bar on every page and still holds it at the right edge of the visible viewport
while the 1000px-wide bar is scrolled sideways.  The hardcoded background colour is
replaced by the bar's own, which is not the same on all pages.  The links now hang in
their own span so that opening the menu no longer pushes the page content down, and
the icon is left out entirely on mirrors that have no top-right links to show.

refs #38251

diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css
index 0035a669a4a..66082ffab18 100644
--- src/hg/htdocs/style/nice_menu.css
+++ src/hg/htdocs/style/nice_menu.css
@@ -73,65 +73,74 @@
 }
 #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 the
-   right-edge-pinned links would collide with "About Us".  Instead pin a menu icon to the visible
-   viewport corner and reveal the links as a dropdown when tapped. */
+/* 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. */
 @media (max-width: 1100px) {
 	#topRightLinks {
-		position:fixed;
-		top:0;
-		right:0;
+		position:sticky;
+		float:right;
+		top:auto;
+		right:14px;
 		height:32px;
 		line-height:32px;
 		padding:0 8px;
-		background:#00457c;
+		background:inherit; /* the bar's blue, which is not the same on all pages */
 		z-index:1000;
 	}
 	#trToggle {
 		display:inline-block;
 		background:none;
 		border:0;
 		color:#fff;
 		font-size:20px;
 		line-height:32px;
 		cursor:pointer;
 		padding:0;
 	}
-	#topRightLinks a.topRightLink {
+	/* 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 {
 		display:none;
+		position:absolute;
+		top:32px;
+		right:0;
+		background:inherit;
 	}
-	#topRightLinks.trOpen {
-		height:auto;
+	#topRightLinks.trOpen #trLinks {
+		display:block;
 	}
-	#topRightLinks.trOpen a.topRightLink {
+	#topRightLinks a.topRightLink {
 		display:block;
 		margin:0;
 		padding:8px 12px;
-		background:#00457c;
 		text-align:right;
 	}
 }
 #main-menu {
 	/* width:1031px; */
 	margin-left: 30px;
 }
 
 
 /* from Jabico ... probably need to apply this to <body>
 #maindiv-whole {
     background: url("../images/internal_bg1.jpg") repeat-x scroll left bottom 	
     	#F9F9F7;
 }
 */