Menu
I am trying to add a banner above my fixed-top navbar. I have looked around and understand some basic concepts on how to do this but my example is a little more complex and I am getting a little lost.
User can add a custom banner to the top of my page. If this happens I need to push everything (including the fixed navbar) down the height of the banner (say 20 px).
I have created a class that I can apply 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}">
That works great to push the static navbar down 20px if there is a banner. However I have to problems.
When you have a static navbar like this you have to add a top padding to the body to push the body content below the banner. Now all of the sudden I would need to push the body content down 70px. Not sure if there is a good way to make this happen dynamically.
I have another static navbar directly underneath the very top navbar. When I move the very top navbar down 20px I need to move this other navbar down 20px as well. Unfortunately this lower nav is fixed as well with top: 50px to place it right below the upper navbar.
I have a plunker here that demonstrates the problem. And I am not really sure where to go from here. Might have to mess with things in javascript, but I would like to try and avoid that is at all possible to avoid things jumping around on page load.
http://plnkr.co/edit/DYYMz1?p=preview
968
I looked at your plunker. I made some changes to your CSS and HTML to accomplish what you are looking for. The change I made to the HTML was the body tag. The new tag looks like this:
<body ng-controller="MainController" ng-class="{'bodyModified': banner == true}">
The new CSS file looks like this:
body {
padding-top: 50px; Need this to move down body under fixed header
}
.bodyModified {
padding-top: 20px;
}
.settings-nav {
position: relative;
right: 0;
left: 0;
background-color: #E2E2E2;
z-index: 1029;
top:0px;
}
.settings-content {
padding-top: 70px;
}
.top-banner-nav {
position: relative;
margin: 0;
height: 20px;
}
.top-banner {
position: fixed;
right: 0;
left: 0;
top:0;
margin-bottom: 0px;
background-color: #FFFF00;
}
You can also use javascript and jQuery to accomplish this as well. Hope that helps. Let me know how it goes.
Here is a plunker demonstrating the changes
http://plnkr.co/edit/39LhQA2gdMremnTOGXe4?p=preview
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
