From 6195940fcf3cc532ab1d03f42b77a3b4c995f6b8 Mon Sep 17 00:00:00 2001 From: Luis Felipe Date: Mon, 5 Apr 2021 16:29:39 -0500 Subject: [PATCH] website: header: Make dropdowns width vary according to their content. This change avoids breaking menu items in separate lines when they are longer than their container box. When they are wrapped, they become hard to read because they look like two separate items. The "Medios" menu in the Spanish version of the website, equivalent to the "Media" menu in the English version, illustrates this odd behavior. It looks as if there were four menu items, when there's actually two. * website/static/base/css/navbar.css (.dropdown:hover .submenu) (.submenu:focus-within): Make submenus adapt to their widest item. (.hline): Limit its width so that submenus are not as wide as the original separator image. --- website/static/base/css/navbar.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/website/static/base/css/navbar.css b/website/static/base/css/navbar.css index 2274aa1..974516a 100644 --- a/website/static/base/css/navbar.css +++ b/website/static/base/css/navbar.css @@ -163,8 +163,7 @@ label.menu-item { .dropdown:hover .submenu { min-width: 150px; - /* reset to initial values: */ - width: auto; + width: max-content; height: auto; overflow: visible; } @@ -174,8 +173,7 @@ label.menu-item { the browser does not support :focus-within. */ .submenu:focus-within { min-width: 150px; - /* reset to initial values: */ - width: auto; + width: max-content; height: auto; overflow: visible; } @@ -205,7 +203,8 @@ label.menu-item { .hline { display: block; - width: 100%; + margin: auto; + width: 150px; height: 1px; } base-commit: 1f7cd6c323c928d6e852acf5d8c746fa0fba010a -- 2.31.0