navigation bar header items are not displayed properly

[dfguerrerom]

As it can be seen in the image below, the header items are displayed wrongly when the width of the window is between 960 and 991px

To reproduce

go to https://scitools.org.uk/cartopy/docs/latest/ and adjust the window to 975px

[drammock]

don't have time to look at the cause/fix today, but I can reproduce the problem.

[melissawm]

We are also observing this at napari/napari-sphinx-theme#178

[trallard]

I can confirm this happens in our docs at around 990px (say 1000px); see the screenshot below to see the docs at such a resolution.

@gabalafou @smeragoel do you have any suggestions on handling this from a usability/UX and implementation POV?
We might want to move the breakpoint at which the navbar is replaced with a hamburger menu (which appears to be triggering at around 940px right now, so 60-50 px might not make too much of a difference) WDYT?

ref:

[gabalafou]

I found the root cause.

Prior to PR #1955, we were importing our SCSS variable overrides before Bootstrap:

@import "variables/bootstrap";
@import "~bootstrap/scss/variables";

I think that 1955 inadvertently moved our "variables/bootstrap" after the Bootstrap import.

PR incoming.

[gabalafou]

Here's a deeper dive into how this broke.

In our variables/_bootstrap.scss, we redefine some Bootstrap breakpoints like so:

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss

Lines 3 to 15 in 6cc8ddf

	$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1400px,
	);
	$grid-breakpoints: (
	xs: 0,
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1200px,
	);

Notice that we set lg in both $container-max-widths and $grid-breakpoints to 960px. In Bootstrap, these values differ: 960px and 992px. I don't know Bootstrap well enough to know why they differ, but the end result was that the 992px breakpoint caused the navbar links to go from flex "row" to "column" layout before hitting the 960px breakpoint for the mobile sidebar, creating a narrow 32-pixel-wide in-between zone in which we saw the wonky behavior described by this issue.