From c27f633752b43493d32ff9ca4387c4a5c533b6e9 Mon Sep 17 00:00:00 2001 From: Brendan Heberlein Date: Mon, 6 Feb 2023 08:38:37 -0600 Subject: [PATCH] FIX: Flex behavior should shrink header items instead of brand (#1158) Co-authored-by: Chris Holdgraf Fixes https://github.com/pydata/pydata-sphinx-theme/issues/1143 --- .../assets/styles/components/header/_header-logo.scss | 2 ++ src/pydata_sphinx_theme/assets/styles/sections/_header.scss | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss b/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss index 33f62989e..eaf4ae65c 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss @@ -6,6 +6,8 @@ width: auto; margin: 0; display: flex; + // Ensure that the logo stays the same length while other content shrinks + flex-shrink: 0; align-items: center; gap: 0.5rem; diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss index bc5626455..6f5ddddd7 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss @@ -30,6 +30,7 @@ // Hide the header items on mobile .navbar-header-items { display: none; + flex-shrink: 1; @include media-breakpoint-up($breakpoint-sidebar-primary) { display: flex; flex-grow: 1; @@ -52,6 +53,7 @@ // A little smaller because this is displayed by default on mobile #navbar-start { + flex-shrink: 0; margin-right: auto; gap: 0.5rem; }