The Bootstrap navbar-fixed-top is failing to function properly within the confines of my "content" div

My goal is to utilize the bootstrap navbar-fixed-top within my id="content" div. However, when I apply the navbar-fixed-top class like this:

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

The navbar ends up on top of everything else.

Query: How can I ensure that only the content inside my id="content" scrolls under the navbar?

Note: Links have been updated with working code, special thanks to @Av Avt, and gratitude to everyone else who contributed.

Code Example Previews

Click Here for CodePen Code Preview

View Full Code Pen Here

HTML

<header id="header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="img-thumbnail">
                    <img src="holder.js/48x48" />
                </div>
                &nbsp;&nbsp;Administration
            </div>
        </div>
    </div>
</header>

<nav id="column-left">
<div id="profile">
    <ul class="media-list">
        <li class="media">
            <div class="media-left">
            <a href="#">
                <img class="media-object img-circle" src="holder.js/64x64" alt="...">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">John Doe</h4>
            <p>Administrator</p>
        </li>
    </ul>
</div>
<ul id="menu">

<li><a href=""><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a></li>

<li>
    <a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Drop Down Menu</span></a>
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a class="parent">Sub Drop Down Menu</a>
            <ul>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
            </ul>
        </li>
    </ul>
</li>

</ul>    
</nav>

<!-- navbar-fixed-top not work correct when have it in my content id -->    

<div id="content">
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
    <div class="container-fluid">

        <div class="navbar-header">
        <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
        </div>

        <div class="navbar-collapse collapse" id="navbar">
            <ul class="nav navbar-nav">
            </ul>
            <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-bell fa-lg"></i> <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" role="separator"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-info-circle"></i> <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" role="separator"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="active"><a href="./">Logout <i class="fa fa-sign-out fa-lg"></i></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
<div class="row">
  <div class="col-lg-6 col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="panel-title">Calender</h1>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>
</div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.0/holder.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

From a comment:

I simply want to use the navbar-fixed-top feature provided by Bootstrap but instead of having it at the top of the page as shown in their examples, I would like it to be within my content id. Additionally, I need the header div to always remain at the top.

htmlcsstwitter-bootstrap

Answer №1

To achieve the desired layout, implement the following CSS rules:

#content{
  position: relative;
}

#content .navbar-fixed-top{
  position: absolute;
}

Once you have positioned the navbar at the top of #content, set a max-height for #content .main-content equal to the viewport height minus the height of the header. Additionally, add overflow: auto;:

#content .main-content{
  padding-top: 70px;
  max-height: calc(100vh - 70px);
  overflow: auto;

  /*Transfer the 40px padding (and all bottom/top padding) from #content to .main_content instead */
  padding-bottom: 40px; 
}

The 

<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
will maintain its behavior as a standard .navbar-fixed-top, but now it will only stick to the top of #content.

Check out the demonstration here: http://codepen.io/anon/pen/gPpOpX

Answer №2

Below is the resolved query :

#content .navbar-fixed-top{
 width: calc(100% - 245px);
 top: inherit;
 right: inherit; 
 left: inherit; 
 bottom:inherit;
 }

Additionally, ensure that you set your #column-left position to fixed if you wish for your sidebar to remain fixed as well.

Answer №3

If you'd like the #content to be scrollable while keeping everything else fixed, I've made some adjustments to the html and css.

  1. I've relocated the navigation 

    <nav class="navbar navbar-default navbar-shadow">
    to #header.

  2. Added the class navbar-fixed-top to the header #header. This will only fix the header to the window if you follow step #3.

  3. Removed the CSS property position: relative for #header.

  4. Using CSS, I added top padding to the body equal to the height of #header. You can also achieve this with JS if preferred.

You can view a working example here

Answer №4

Avoid the utilization of navbar-fixed-top and determine the scrollable height with jQuery:

var newHeight = $(document).height();
$('#content').css({ 'height': newHeight - 120, 'scroll-x': 'auto' });

REMINDER: It may be necessary to recalibrate the height during $(window).resize().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering the background color of see-through HTML elements using Selenium

Looking to count the characters with a specific background color. I am currently traversing through all the HTML nodes using this method: Counting inner text letters of HTML element Example HTML Page: <span style="background-color: #ffff00;"> ...

htmlseleniumwebdriverbackground-color

Use the inline IF statement to adjust the icon class depending on the Flask variable

Is it feasible to achieve this using the inline if function? Alternatively, I could use JavaScript. While I've come across some similar posts here, the solutions provided were not exactly what I expected or were implemented in PHP. <i class="f ...

javascriptpythonhtmlflaskjinja2

minimize the size of the indigenous foundation input field

Currently incorporating this code snippet into my application: <Item fixedLabel> <Input style={{ width: 0.5 }}/> </Item> The fixedLabel element is extending the entire width of the screen. I have attempted adju ...

javascriptcsstypescriptreact-nativenative-base

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

javascriptjqueryhtmlcssyii

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

Scroll effect for read-only text input with long content inside a div

Is there a way to replicate the scroll functionality of a text input with readonly="readonly"? When the text exceeds the box size, you can highlight and scroll to view it all without a visible scrollbar. I am interested in achieving this effect within a p ...

javascripthtmlcss

Having trouble accessing the value of a node in JavaScript, as it keeps returning as "null"

Experimenting with converting HTML elements into lists. The objective is to generate a list of all values in a table upon clicking the "page next" buttons on it. Afterward, an alert should display the value of the first item in the list, which corresponds ...

javascriptjqueryhtmllistnodes

Display content from an external HTML page within a div using Ionic

Currently, I am facing an issue where I am utilizing [innerHtml] to populate content from an external HTML page within my Ionic app. However, instead of loading the desired HTML page, only the URL is being displayed on the screen. I do not wish to resort t ...

javascripthtmlangularionic-framework

Chrome Extension to Emphasize Every Word

As a novice, I am embarking on the journey of creating my own chrome extension. The idea is to design a popup.html file that showcases a "highlight" button. The functionality would involve clicking this button to highlight all words on the page. Here&apos ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Access a document by selecting a particular page from a designated anchor tag

Seeking assistance from the community on opening a particular page within a file using an anchor tag (<a href=""></a>). The issue arises when trying to pass a parameter through the xls file, as it prevents locating the specified page. Any gui ...

htmlexcelpdfanchor

Combining jqueryUI autocomplete and datalist for enhanced user input options

My search form in HTML has a single input field where users can enter three different things: area name, trek name, or other keywords. For areas not in a database, I have implemented a datalist field (HTML) connected to the input for autocompleting the a ...

jqueryhtmlautocompletehtml-datalist

Execute a PHP function using JavaScript/jQuery with AJAX requests

Hello everyone, I am reaching out for assistance with AJAX as I am still quite new to it. Despite the abundance of examples available, I find it challenging to grasp the concept. Specifically, I need help with my validation of a contact form using JavaScri ...

phpjavascriptjqueryhtmlajax

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml

Manipulating div position interactively with vanilla javascript during scroll

I'm trying to create an effect where an image inside a div moves vertically downwards as the user scrolls, stopping only at the end of the page. I've attempted a solution using a script from another post, but it doesn't seem to be working. ...

javascriptjqueryhtmlcssscroll

Image element for Material UI CardMedia

There is a component in Material UI called CardMedia that allows for media content within a Card. The Mui website showcases an example using the img tag with CardMedia. https://mui.com/material-ui/react-card/#complex-interaction I am interested in using ...

htmlreactjsmaterial-uijsx

Steps for accessing specific menu div on a new tab

I'm facing an issue with my one page website. Whenever I click on a menu item, it directs me to a specific div tag on the page. However, if I right-click on a menu item and select 'open in new tab', it opens the URL "www.mysite.com/#" instea ...

javascriptjqueryhtml

Create a JavaScript script within a CSS file

I'm attempting to create this using only CSS: Codepen and I would like to achieve the same effect but solely with CSS. This is what my CSS looks like: .text{ --a: calc(var(--a);*0.82+(1.5-var(--b);)/10); --b: calc(var(--b);+var(--a);); transfor ...

javascriptcss

Using jQuery to reset the position of animated divs

I am currently working on a code that expands and centers a div when hovered upon using the following script: $(document).ready(function(){ //animation on hover $('#sliding_grid li').hover(function() { ...

javascriptjquerycss

Creating and implementing a HTML template from scratch, devoid of any frameworks

Is there a way to create a quiz where all questions follow the same format and only one question is displayed at a time, without duplicating code? Perhaps using a template would be the ideal solution in this scenario. I appreciate your help. ...

javascriptjqueryhtmltemplatestemplating

Unusual Behavior in AngularJS: Using ng-include Triggers Full Page Reloading

An issue arises where a simple ng-include command causes the entire website to be printed recursively in a specific area of the page, ultimately crashing the browser. Even changing the path doesn't resolve the problem, suggesting that it's not ev ...

javascripthtmlangularjsangularjs-ng-include