Adding items above and below bootstrap fixed navigation
I am trying to add a banner above a fixed top navbar. I've looked around and figured out some basic concepts on how to do this, but my example is a little more complicated and I'm a little lost.
User can add custom banner to the top of my page. If this happens, I need to push everything (including the fixed nav) to the banner's height (20px for example).
I 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}">
This works great to render a static nav 20px if there is a banner. However, I have to face problems.
-
When you have a static navbar like this, you have to add the top padding to the body to nudge the body content underneath the banner. Now, all of a sudden, I will need to nudge the body content 70px. Not sure if there is a good way to do this dynamically.
-
I have another static navbar right below the very top navbar. When I move the topmost nav by 20px, I need to move this other nav by 20px. Unfortunately, this bottom navbar is also fixed at the top: 50px to place it right below the top nav bar.
I have a plunker that demonstrates the problem. And I'm not really sure where to go from here. You may have to mess around with things in javascript, but I would like to try and avoid that, and it is generally possible to avoid jumping from the site on page load.
source to share
I looked at your plunker. I've made some changes to your CSS and HTML to accomplish what you're looking for. The change I made for 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 for this. Hope this helps. Let me know how it goes.
Here is a plunker demonstrating the changes
source to share
you can try jquery solution for this. For example, if you are using a class top-nav-fixed-banner
, you can code something like this.
function fixBannerHeight(){
var bannerHeight = $(".top-banner-div").height();
$(".top-nav-fixed-banner").each(function(e){
var height = $(this).height();
bannerHeight = bannerHeight + height;
})
$('.top-banner-div').css({"height":bannerHeight+"px"});
}
call fixBannerHeight()
when adding a dynamic banner.
Hope it helps.
source to share