Displaying .navbar-fixed-top Inside The Builder

The Bootstrap framework allows to fix the navigation bar to the to of the page. When using the CSS class .navbar-fixed-top, the navigation bar will remain fixe to the top as the page is being scrolled. When the position of an element is set to ‘fixed’, the element’s width and height are not taken into account when determining the overall size of the page.

Inside the builder that means that a block that only has a navigation bar that it is set to fixed (.navbar-fixed-top), the block will return zero (0) as the height of the navigation bar. As a result, the block will disappear from the screen since its height will be set to zero (0). To prevent this, when using .navbar-fixed-top make sure that you add the following code to the CSS of your block.

@media (min-width: 992px) {
    .in-builder .navbar-fixed-top {
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

This will set the navigation bar position to relative, allowing the builder to calculate the height of the navigation bar and displaying it appropriately in the builder interface.