navbar overwrites the other elements when the page size is changed

Question

I have this fictitious application in R.

I tried to adjust the .navbar, .sidebar and the .value-box with the property position: relative; to avoid overlapping of elements:

.navbar {
  position: relative;
}

.sidebar {
  position: relative; 
}

.value-box {
  position: relative;
}

But, always the .navbar runs over the other elements in the case .sidebar and the .value-box when I modify the screen size:

My goal is to get the .navbar Equal descend occurs now, but the other elements need to descend/adjust to not be swallowed by .navbar. Something like that:

Answer 1

Remove from body whichever padding-top and insert the code below on the page (at the end of the body):

$(window).on("load resize", function(){
   let navHeader = 0;
   if($("#dashboard-container").offset().top < $(".navbar-header").outerHeight()) navHeader = $(".navbar-header").outerHeight();
   $("#dashboard-container").css({"top": ($(".navbar-fixed-top").outerHeight()+10+navHeader) +"px", "position" : "relative"});
   $("#section-sidebar").css("top", ($(".navbar-fixed-top").outerHeight()+10) +"px");
});

By CSS you can’t tell the height of the navbar, so it sits on top of the elements below when it gets bigger, just putting padding-top no body is not enough, since navbar height may vary.

The above code detects when the page loads or when the window resizes and repositions the side (which is fixed) and dahsboard div according to navbar height.

If you can’t find where the padding-top no body is inserted, just set in your custom CSS (the one you created. If you didn’t create one, create one) and put:

body{
   padding-top: 0 !important;
}

This will overwrite any other CSS that might be adding the padding-top to the body.