Create navigation bar that remains the same when user zooms out

Dash Python
1

Hi,

I’m trying to make a simple Dash web app using dash bootstrap components. In my app I have 4 rows and 2 columns, where in column 1, row 1, I’m using dbc.Nav function to create my navigation bar, where all of the dcc filtering is being done. Everything works fine, however, when the user zooms out of the application, to eg 25%, the Plotly graphs and dbc.Nav panel shrink and are hard to read.

Hence, I would like to accomplish two things:

  1. make dbc.Nav irresponsive to zooming out or make it resize properly, so that the size and position of all its elements always remain the same.
  2. make the size of the Plotly graphs relatively bigger to the screen: e.g. when a user now zooms out, the fonts and the thickness of the lines/markers in the graph remain the same and almost invisible at 25% zoom.

Would you be able to advise on what can be done? I was the closest with achieving the above by using width, height and font size relative to the screen. However, it does not scale up/down the navigation bar that well, e.g. the size of datepickerrange font remains the same, dcc dropdowns are scaling well at width, but not at height, making them look awkard.

Appreciate your help!