starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Reduce cut-off point for mobile navigation #1310

New Issue
Closed
opened 2025-12-29 16:31:20 +01:00 by adam · 4 comments
adam commented 2025-12-29 16:31:20 +01:00
Owner
Copy Link

Originally created by @candlerb on GitHub (Oct 16, 2017).

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:

image

At 992px wide, with the change proposed above:

image

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

image

... but not if you capitalize:

image

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

Originally created by @candlerb on GitHub (Oct 16, 2017). ### Issue type [ ] Feature request <!-- Requesting the implementation of a new feature --> [X] Bug report (minor change for usability) <!-- Reporting unexpected or erroneous behavior --> [ ] Documentation <!-- Proposing a modification to the 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: ![image](https://user-images.githubusercontent.com/44789/31608246-8a767658-b267-11e7-9d10-8739c4ab3640.png) ----- At 992px wide, with the change proposed above: ![image](https://user-images.githubusercontent.com/44789/31608142-21b3acbc-b267-11e7-9f2f-66b0a8d10938.png) ----- I suppose width of the username is a concern. At 992px, it works with "englebert humperdink": ![image](https://user-images.githubusercontent.com/44789/31608377-11f0575c-b268-11e7-9b5b-5bbde53abefb.png) ... but not if you capitalize: ![image](https://user-images.githubusercontent.com/44789/31608464-5c2672b6-b268-11e7-90c5-7510bde4aeb1.png) In this case, it corrects at 995px. I would be fine with 1000px or 1024px as cutoff if that's preferred.
adam added the type: bug label 2025-12-29 16:31:20 +01:00
adam closed this issue 2025-12-29 16:31:21 +01:00
adam commented 2025-12-29 16:31:21 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 16, 2017):

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

@jeremystretch commented on GitHub (Oct 16, 2017): Every time I change it, someone opens a ticket to change it to a different value. See #1397.
adam commented 2025-12-29 16:31:21 +01:00
Author
Owner
Copy Link

@candlerb commented on GitHub (Oct 16, 2017):

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.

@candlerb commented on GitHub (Oct 16, 2017): 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.
adam commented 2025-12-29 16:31:21 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Nov 15, 2017):

^ That commit should have been applied to #1397.

@jeremystretch commented on GitHub (Nov 15, 2017): ^ That commit should have been applied to #1397.
adam commented 2025-12-29 16:31:22 +01:00
Author
Owner
Copy Link

@candlerb commented on GitHub (Nov 15, 2017):

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

@candlerb commented on GitHub (Nov 15, 2017): This looks great, for both #1599 and #1397. Thank you!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label type: bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#1310
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?