Reduce cut-off point for mobile navigation

[candlerb]

Issue type

[ ] Feature request
[X] Bug report (minor change for usability)
[ ] Documentation

Environment

• Python version: 3.5.2
• NetBox version: 2.2.1

Description

At the moment, the cut-over between 'mobile navigation' and normal navigation occurs when the window exceeds 1200px wide.

However I tend to have my window around 1100px and mobile navigation is annoying for that. There appears to be space on the menu bar for it to work down to under 1000px. (At least, tested with Chrome/macOS)

If I change the navigation to switch at 992px, then it changes at exactly the same point as the listings change from side-by-side to above-and-below display (results / search box), and I think this looks good.

--- a/netbox/project-static/css/base.css
+++ b/netbox/project-static/css/base.css
@@ -35,8 +35,8 @@ footer p {
     margin: 20px 0;
 }

-/* Collapse the nav menu on displays less than 1200px wide */
-@media (max-width: 1199px) {
+/* Collapse the nav menu on displays less than 992px wide */
+@media (max-width: 991px) {
     .navbar-header {
         float: none;
     }

---

At 991px wide:

---

At 992px wide, with the change proposed above:

---

I suppose width of the username is a concern. At 992px, it works with "englebert humperdink":

... but not if you capitalize:

In this case, it corrects at 995px. I would be fine with 1000px or 1024px as cutoff if that's preferred.

[jeremystretch]

Every time I change it, someone opens a ticket to change it to a different value. See #1397.

[candlerb]

That's a different threshold - putting the search box in the top bar for width 1600px+. I didn't even know it did that until now :-)

The point from #1397 does still apply though: the logged-in username might be long if it's an E-mail address with domain name. (I wouldn't mind if it was truncated on the right though)

I would actually like the global search always available, rather than always going back to the home page as I have been doing currently. So could I be sold on global search + hamburger menu instead of proper menus? Possibly.

The main problem with the mobile navigation with wide screens is that you click on the very right-hand side of the bar for the navigation, but then have to move to the very left-hand side to select the option of interest. So if the hamburger were moved to the left-hand side, with global search next to it, and the Netbox logo on the right, that would work.

[jeremystretch]

^ That commit should have been applied to #1397.

[candlerb]

This looks great, for both #1599 and #1397. Thank you!