Adjusting the height of the navigation bar dynamically using Bootstrap

Question

Adjusting the height of the navigation bar dynamically using Bootstrap

I am new to using Bootstrap and AngularJS, and I am currently working on a page where the top and left side of the page need to be static and not move. To achieve this, I used

<nav class="navbar navbar-default navbar-fixed-top

from Bootstrap for the header, and applied position: fixed to keep the left part of the page static.
The issue I am encountering is that the navbar is dynamically created and its height depends on data fetched from the database (which are the filters). This results in my header covering some content on the page making it inaccessible. What would be the best way to resolve this? Perhaps using a different approach instead of the navbar.

css twitter-bootstrap angularjs-bootstrap

Answer 1

Answer №1

To achieve this functionality, I recommend using two custom directives. One directive will keep track of the height of elements (such as a navbar) and the other directive will adjust the CSS padding based on the updated height.

.directive('trackHeight', function() {
   var additionalPadding = 10;
    return {
        link: function(scope, element, attrs) {
            scope.$watch('heightToWatch', function(newHeight) {
                element.css({
                  'padding-top': newHeight + additionalPadding + 'px'
                });
            });
        }
    };
})

.directive('adjustHeight', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(function() {
              scope.heightToWatch = element[0].offsetHeight;
            });

            angular.element(window).on('resize', function() {
                $rootScope.$apply(function() {
                    scope.heightToWatch = element[0].offsetHeight;
                });
            });
        }
    };
});

HTML:

<body ng-app="myApp" ng-controller="TestCtrl" track-height="">
    <nav class="navbar navbar-default navbar-fixed-top" adjust-height="">
      <div class="container">
        <p class="navbar-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
      </div>
    </nav>
    <div class="container">
        Lorem ipsum dolor sit amet...
    </div>
</body>

I have also included monitoring for window resizing in case it is necessary for your specific use case.

http://plnkr.co/edit/AGdhZBiCfbH8GbU3y3Yy

Answer 2

To achieve this functionality, I recommend using two custom directives. One directive will keep track of the height of elements (such as a navbar) and the other directive will adjust the CSS padding based on the updated height.

.directive('trackHeight', function() {
   var additionalPadding = 10;
    return {
        link: function(scope, element, attrs) {
            scope.$watch('heightToWatch', function(newHeight) {
                element.css({
                  'padding-top': newHeight + additionalPadding + 'px'
                });
            });
        }
    };
})

.directive('adjustHeight', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(function() {
              scope.heightToWatch = element[0].offsetHeight;
            });

            angular.element(window).on('resize', function() {
                $rootScope.$apply(function() {
                    scope.heightToWatch = element[0].offsetHeight;
                });
            });
        }
    };
});

HTML:

<body ng-app="myApp" ng-controller="TestCtrl" track-height="">
    <nav class="navbar navbar-default navbar-fixed-top" adjust-height="">
      <div class="container">
        <p class="navbar-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
      </div>
    </nav>
    <div class="container">
        Lorem ipsum dolor sit amet...
    </div>
</body>

I have also included monitoring for window resizing in case it is necessary for your specific use case.

http://plnkr.co/edit/AGdhZBiCfbH8GbU3y3Yy

Adjusting the height of the navigation bar dynamically using Bootstrap

Answer №1

Similar questions

Printing feature causing conflicts with other jQuery event listeners

Display a div when a button is clicked and hide it when clicking outside of the div

Incorporating both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Step-by-step guide to showing a div upon clicking an element using jQuery

I'm unable to scroll back up after making an ajax request, as the code automatically scrolls to the bottom of the div

Using an image as the background for a three.js scene may cause it to appear distorted

Is there a way to create space at the bottom after setting margin to auto?

Crafting visually stunning interfaces with Material UI

Challenges with navbar and CSS alignment in Internet Explorer

Centralizing the Accordion header and expansion icon in React with Material-UI

What could be causing my CSS external stylesheet to display in Chrome but not in IE?

buttons are arranged horizontally, stacked neatly on top of one another

Hover over the image with some padding placed around it to see

Solution for problem with IE scrollWidth

Issue with Bootstrap 4 list items not displaying in block format

Is it possible to use Bootstrap's Accordion or Alert styles with HTML elements <details> and <summary>?

Gallery not responsive on HTML/CSS site

Creating engaging animations for variable content in Safari using CSS

jQuery - issue with toggling class on label/input when clicking rapidly

Aligning elements in the center vertically using absolute positioning for multiple elements