Breadcrumb navigation visibility on mobile/narrow screens

[alexmontez]

Summary

Breadcrumb navigation isn't visible on mobile or in narrow browser windows. This can be fixed by changing the CSS selectors slightly (instead of div.related, use div.related li.right and div.related li.switchers on line 568 of pydoctheme.css).

Description

Currently, https://docs.python.org has two navigation menus in the HTML of each page, using a media query to switch between the two:

• <div class="related"> for desktop navigation
• <div class="mobile-nav"> for navigation on screens (or browser windows) narrower than 1024px

The main difference between the two menus is that the <div class="related"> menu contains breadcrumb navigation while the <div class="mobile-nav"> menu does not. (Related: python/cpython#123452 "Within-section navigation missing for smaller screens, global contents difficult to navigate.")

If the breadcrumb navigation was always visible, the Python docs site would be more user-friendly.

For example, when I'm working on a project, I usually have a browser window open at the same time (side-by-side) so I can easily refer to documentation, a tutorial etc. On a laptop-size screen, I have to resize the browser window every single time I want to see the breadcrumb navigation.

Suggested change

This is the current CSS (lines 567 to 570, inside an @media (max-width: 1023px) media query), which removes <div class="related"> entirely:

python-docs-theme/python_docs_theme/static/pydoctheme.css

Lines 567 to 570 in 8e9ae96

	/* Remove sidebar and top related bar */
	div.related, div.sphinxsidebar {
	display: none;
	}

If the selectors are changed as follows, the breadcrumb navigation remains visible on mobile while the rest of <div class="related"> is removed:

/* Remove sidebar, but leave breadcrumb navigation visible */
div.related li.right, div.related li.switchers, div.sphinxsidebar {
    display: none;
}

[hugovk]

Please can you share some before and after screenshots of desktop and mobile?