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/inc/globalNavBar.inc src/hg/htdocs/inc/globalNavBar.inc index 9750f22f1bb..26644bdfd39 100644 --- src/hg/htdocs/inc/globalNavBar.inc +++ src/hg/htdocs/inc/globalNavBar.inc @@ -1,132 +1,133 @@ <a href="#mainContent" class="skipNav" tabindex="-1">Skip to main content</a> <div id="main-menu-whole"> <!-- Top-right links (Share a link, Login). These comment placeholders are replaced at runtime by menuBar() in lib/web.c (CGI pages) and by hgMenubar.c (static pages). They sit in their own - absolutely-positioned container at the top-right of the bar, not inside the menu list. --> -<div id="topRightLinks"><button type="button" id="trToggle" aria-label="Menu" aria-expanded="false">☰</button><!-- SHARE_LINK --><!-- LOGIN_LINK --></div> + own container at the top-right of the bar, not inside the menu list. On narrow screens the + #trLinks span becomes a dropdown under the menu icon (see nice_menu.css). --> +<div id="topRightLinks"><button type="button" id="trToggle" aria-label="Menu" aria-expanded="false">☰</button><span id="trLinks"><!-- SHARE_LINK --><!-- LOGIN_LINK --></span></div> <div id="main-menu"><div id="block-nice_menus-1" class="clear-block block block-nice_menus"> <div class="upcorner"></div> <div class="blockbg"> <div class="blockcontent"> <div class="content"> <nav aria-label="Main menu"><ul class="nice-menu nice-menu-down sf-js-enabled" id="nice-menu-1"> <li class="first even" id="home"><a href="../index.html" ><span id="home-link">Home</span></a></li> <li class="menuparent" id="tools1"><a href="../cgi-bin/hgGateway" aria-expanded="false">Genomes</a> <ul style="display: none; visibility: hidden;"> <li class="first defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=hg38&position=lastDbPos">Human GRCh38/hg38</a></li> <li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=hg19&position=lastDbPos">Human GRCh37/hg19</a></li> <li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=hub_3671779_hs1&position=lastDbPos">Human T2T-CHM13/hs1</a></li> <li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=mm39&position=lastDbPos">Mouse GRCm39/mm39</a></li> <li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=mm10&position=lastDbPos">Mouse GRCm38/mm10</a></li> <li class="defaultDropdownLink"><a title="Browse thousands of additional assemblies in our Genome Repository" href="https://hgdownload.gi.ucsc.edu/hubs/">Genome Repository GenArk</a></li> <li class="last"><a href="../cgi-bin/hgGateway">Other</a></li> </ul> </li> <li class="menuparent" id="tools2"><a href="../cgi-bin/hgTracks" aria-expanded="false">Genome Browser</a> <ul style="display: none; visibility: hidden;"> <li id="backToBrowserLi" class="first"><a id="backToGenomeBrowser" href="../cgi-bin/hgTracks">Back to Genome Browser</a></li> <li><a id="configureMenuLink" title="Configure track display or change the Genome Browser font and other display settings" href="../cgi-bin/hgTracks?hgTracksConfigPage=configure">Configure</a></li> <li><a id="trackSearchMenuLink" title="Search from all available tracks in the current genome" href="../cgi-bin/hgTracks?hgt_tSearch=track+search">Track Search</a></li> <li><a id="shortMatchLink" title="Find short DNA sequences" href="../cgi-bin/hgTrackUi?g=oligoMatch&oligoMatch=pack">Short Exact DNA Match</a></li> <!-- OPTIONAL_RECOMMENDED_TRACK_SETS_MENU --> <!-- OPTIONAL_EXPORTED_TRACK_DATA_HUBS_MENU --> <li><a id="cartResetMenuLink" title="Reset user settings; Note: this removes customs tracks and track hubs" href="../cgi-bin/cartReset?skipLs=1">Reset All User Settings</a></li> </ul> </li> <li class="menuparent" id="tools3"><button type="button" aria-expanded="false">Tools</button> <ul style="display: none; visibility: hidden;"> <li class="first"><a id="blatMenuLink" title="Search the genome for sequence matches" href="../cgi-bin/hgBlat?command=start">Blat</a></li> <li><a id="ispMenuLink" title="Check the specificity of short primers" href="../cgi-bin/hgPcr">In-Silico PCR</a></li> <li><a id="tableBrowserMenuLink" title="Query and retrieve from all Genome Browser data" href="../cgi-bin/hgTables">Table Browser</a></li> <li><a id="liftOverMenuLink" title="Convert coordinates between two assemblies" href="../cgi-bin/hgLiftOver">LiftOver</a></li> <li><a id="vaiMenuLink" title="Annotate variants using a variety of data sources" href="../cgi-bin/hgVai">Variant Annotation Integrator</a></li> <li><a id="diMenuLink" title="Intersect the data from several tracks" href="../cgi-bin/hgIntegrator">Data Integrator</a></li> <li><a title="Explore gene/protein interactions and pathways" id="interactionMenuLink" href="../cgi-bin/hgGeneGraph">Gene Interactions</a></li> <li class="last"><a title="See our other tools and external tools for working with Genome Browser data" href="../util.html">Other Tools</a></li> </ul> </li> <li class="menuparent" id="mirrors"><button type="button" aria-expanded="false">Mirrors</button> <ul style="display: none; visibility: hidden;"> <li class="first"><a title="A Genome Browser mirror hosted closer to your location may improve speed" href="../mirror.html">Euro/Asia Mirrors</a></li> <li><a href="../goldenPath/help/mirror.html">Mirroring Instructions</a></li> <!-- OPTIONAL_MIRROR_MENU --> </ul> </li> <li class="menuparent" id="downloads"><button type="button" aria-expanded="false">Downloads</button> <ul style="display: none; visibility: hidden;"> <li class="first"><a title="Download underlying Genome Browser data files" href="https://hgdownload.gi.ucsc.edu/downloads.html">Genome Data</a></li> <li><a href="https://hgdownload.gi.ucsc.edu/downloads.html#source_downloads">Source Code</a></li> <li><a title="Purchase a commercial license for certain Genome Browser software" href="https://genome-store.ucsc.edu">Genome Browser Store</a></li> <li><a title="Download utilities for working with Genome Browser data" href="https://hgdownload.gi.ucsc.edu/downloads.html#utilities_downloads">Utilities</a></li> <li class="last"><a href="../goldenPath/help/ftp.html">FTP</a></li> <li class="last"><a href="../goldenPath/help/mysql.html">MySQL Access</a></li> <li class="last"><a href="../goldenPath/help/cloud.html">Cloud Access</a></li> <li class="last"><a href="../goldenPath/help/api.html">REST API</a></li> </ul> </li> <li class="menuparent" id="myData"><button type="button" aria-expanded="false">My Data</button> <ul style="display: none; visibility: hidden;"> <li><a id="customTracksMenuLink" title="Manage your custom tracks" href="../cgi-bin/hgCustom">Custom Tracks</a></li> <li><a id="sessionsMenuLink" title="Create, manage, and share snapshots of Genome Browser configurations" href="../cgi-bin/hgSession?hgS_doMainPage=1">My Sessions</a></li> <li><a id="trackHubsMenuLink" title="Connect and manage your own track hubs or browse public hubs" href="../cgi-bin/hgHubConnect">Track Hubs</a></li> <li><a id="hubSpaceMenuLink" title="Upload track hub files" href="../cgi-bin/hgHubConnect#hubUpload">Hub Upload</a></li> <li><a id="customCompositeMenuLink" title="Build your own collection of tracks on the fly" href="../cgi-bin/hgCollection">Track Collection Builder</a></li> <li class="last"><a id="publicSessionsMenuLink" title="See how others are using the Genome Browser" href="../cgi-bin/hgPublicSessions">Public Sessions</a></li> </ul> </li> <!-- OPTIONAL_VIEW_MENU --> <!-- OPTIONAL_PROJECT_MENU_START --> <li class="menuparent" id="projects"><button type="button" aria-expanded="false">Projects</button> <ul style="display: none; visibility: hidden;"> <li class="first"><a href="../gtex.html">Genotype Tissue Expression (GTEx)</a></li> <li><a href="../ENCODE/index.html">Encyclopedia of DNA Elements (ENCODE)</a></li> <li><a href="../singlecell.html">UCSC Cell Browser</a></li> <li class="last"><a href="../covid19.html">UCSC COVID-19 Research</a></li> </ul> </li> <!-- OPTIONAL_PROJECT_MENU_END --> <li class="menuparent" id="help"><button type="button" aria-expanded="false">Help</button> <ul style="display: none; visibility: hidden;"> <!-- CONTEXT_SPECIFIC_HELP --> <li><a title="See frequently asked questions and search our help documentation" href="../FAQ/">FAQs & Search</a></li> <li><a title="Help documentation covering all aspects of the Genome Browser" href="../goldenPath/help/hgTracksHelp.html">Browser Documentation</a></li> <li><a title="How-to videos for various Genome Browser tasks and other materials" href="../training/index.html">Training</a></li> <li class="last" id="contactUs"><a title="Ask us a question" href="../contacts.html">Contact Us</a></li> </ul> </li> <li class="menuparent last" id="aboutUs"><button type="button" aria-expanded="false">About Us</button> <ul style="display: none; visibility: hidden;"> <li class="first odd"><a href="../goldenPath/newsarch.html">News</a></li> <li class="even"><a href="../cite.html">Cite Us</a></li> <li class="odd"><a href="../goldenPath/releaseLog.html">Release Log</a></li> <li class="even"><a href="../staff.html">Staff</a></li> <li class="odd"><a href="../conditions.html">Conditions of Use</a></li> <li class="even"><a href="../goldenPath/history.html">Our History</a></li> <li class="odd"><a href="../license/">Licenses</a></li> <li class="even last" id="aboutContactLink"><a href="../contacts.html">Contact Us</a></li> </ul> </li> </ul></nav> </div> </div> </div> <div class="downcorner"></div> </div> </div><!-- end main-menu --> </div><!-- end main-menu-whole -->