Modifying CSS to Accommodate for Dynamic Navigation Bar

[SMMS25]

Hi,

I have a flexdashboard with multible tabs, using the theme Lumen. When I resize the page, i.e. decrease the width of the page, these tabs become multiple rows and overlap with the content of the main dashboard.

This issue has been mentioned in this post below as well, however there was no fix to this, but an alternative of using a dropdown menu was suggested. I would prefer not to have a drop down menu.

https://stackoverflow.com/questions/42914936/prevent-navigation-bar-from-overlapping-content-in-flexdashboard-r

I have started to solve this by creating an additional style sheet and by specifying:

.navbar-inverse.navbar-fixed-top{ overflow:auto }

This allows for the navigation bar container div to be resized dynamically displaying the tabs correctly.

However the div after ".navbar-inverse.navbar-fixed-top" which is "#dashboard-container" does not dynamically change its position. The content is still being overlapped by the navigation bar.

I am not able to figure out a way of how to specify "#dashboard-container" to dynamically reposition its top where the navbar ends.

The code below works in a small window and solves the overlap, however when the screen is resized to a full screen, there is empty space which does not look nice.

#dashboard-container{ position: relative; top: 10% }
I would gladly appreciate some help in figuring out a solution to this problem.

Thank you!

[mateuspestana]

Hey, I'm having the same issue and would love to see if someone has some tip to solve it!

[cpsievert]

This issue should be fixed by #308 (please reopen if it doesn't)