I am attempting to include a banner above my fixed-top navbar. Although I have some basic understanding of how to achieve this, my specific example seems to be more complex and I am struggling to find the right solution.
Users should be able to add a custom banner to the top of my page. If this occurs, I need to adjust everything (including the fixed navbar) down by the height of the banner (let's say 20 px).
I have defined a class that can be applied to the nav element:
.top-banner-nav {
top: 20px;
}
Navbar:
<nav class="navbar navbar-default navbar-fixed-top" ng-class="{'top-banner-nav': banner == true}">
This works well for moving the static navbar down by 20px when a banner is present. However, I am facing two issues.
With a static navbar like this, I have to add top padding to the body to shift the body content below the banner. Now, I would need to move the body content down by 70px. I'm unsure if there's a dynamic solution for this.
There's another static navbar directly below the top navbar. When I move the top navbar down by 20px, I also need to move this lower navbar down by 20px. Unfortunately, this lower navbar is fixed with top: 50px to position it right below the upper navbar.
I have a plunker showcasing the issue. At this point, I'm unsure how to proceed further. It may involve tinkering with JavaScript, but I'd prefer to find a solution that avoids any jumping around during page load if possible.