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

jQuery prioritizes enforcing style over using a CSS file

I am facing an issue with a nested div functioning similar to a drop-down menu. The problem arises when I click on the #two div as I want it to disappear. To handle this, I utilized jQuery and tried using both .hide() and .slideUp(). However, upon implem ...

jqueryhtmlcss

Design an HTML watermark input that remains visible as the user starts typing

I'm currently in the process of developing an application that enables businesses to access their account through theirname.mydomain.com. I am working on creating a signup form for this purpose. Today, I stumbled upon squarespace and noticed they hav ...

jqueryhtml

The text is not rendering properly, with some characters being replaced by different ones

RESOLUTION: To fix the issue, eliminate font-family, font-size, and color properties from the parent div. UPDATE: The problem only occurs when I press CTRL + F5. UPDATE 2: After investigating, I found that the culprit is .site-footer with a position:abso ...

htmlcsswordpresstextvisual-glitch

Differentiate various collections of shapes

My application has a specific workflow: 1) Next to the name of Patient X, there is a "Check In" button. Once clicked, this action is recorded on the server side. 2) Upon clicking the "Check In" button, a dropdown menu appears with various locations for t ...

javascriptjqueryhtml

Is it possible to apply capital spacing in CSS for OpenType fonts without using font-feature-settings?

Is it possible to adjust capital spacing (cpsp) for an element without impacting any other applied OpenType features? Unfortunately, utilizing the font-feature-settings is not a viable solution. For example, if we use font-feature-settings: 'cpsp&apo ...

csstypographyopentypefont-feature-settings

Jquery not functioning properly for show and hide feature

I'm new to using Jquery and JqueryUI. I have a div named front, which I want to initially display on window load and then hide it by sliding after a delay of 5500 milliseconds. However, I'm encountering errors in the jquery.min.js file. The HTML ...

javascriptjqueryhtmlcssjquery-ui

It is not possible to trigger an input click programmatically on iOS versions older than 12

Encountering a challenge in triggering the opening of a file dialogue on older iOS devices, particularly those running iOS 12. The approach involves utilizing the React-Dropzone package to establish a dropzone for files with an added functionality to tap ...

javascriptcssiosmobile-safarireact-dropzone

Cannot Get jQuery .flip() to Work Automatically Every 2 Seconds

There are 3 words that I want to rotate on their x-axis every 2 seconds (repeating). Using jQuery: $(function () { count = 0; wordsArray = ["Innovation", "Creativity", "Success"]; setInterval(function () { count++; $("#words").text(wordsArray[co ...

javascriptjqueryhtml

Tips on adjusting content to match column width in Bootstrap

I currently have the following HTML and CSS: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f7edf5edf1">[email protected]</a>/d ...

htmlbootstrap-4

The Angular template driven forms are flagging as invalid despite the regExp being a match

My input looks like this: <div class="form-group"> <label for="power">Hero Power</label> <input [(ngModel)]="model.powerNumber" name="powerNumber" type="text" class="form-control" pattern="^[0-9]+$"id= ...

javascripthtmlregexangular

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being

I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load. Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform whe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Leverage PHP email functionality by incorporating variables within the email

I am utilizing Google to create a QR code using a random number. Once the number is generated, it is saved as a variable. My intention is to incorporate this variable within an image link in an email. Below is an example of how I want to achieve this: Th ...

phphtmlemail

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

Customize Text Area's Font Based on Selected Option in Dropdown List

I'm currently working on an HTML file that includes a dropdown list and a text area. Here's the code snippet: <select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'> <option value = ' ...

javascripthtml

NextJS compilation sometimes results in undefined errors when using Sass styles

My peace lies in the sass code: .link display: inline-table text-align: center align-self: center margin: 5px 15px font-size: 20px color: black text-decoration: none transition: 0.1s ease-in-out .link:hover text-decoration: underline .l ...

csstypescriptsassnext.jstsx

Is it necessary for nested Bootstrap 3 rows to be enclosed within a col-sm-*?

Is it necessary for nested Bootstrap 3 rows to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc? The documentation specifies col-sm-* but does not clearly state if nesting within other col sizes is not allowed. http://getboo ...

csstwitter-bootstraptwitter-bootstrap-3

Unable to see html5 canvas content when accessing from localhost

I am having an issue with displaying code in an HTML file. When I try to view the code on localhost using MAMP, all I see is a black canvas area with a border around it. I have checked it in both Chrome and Firefox, but I keep getting the same results. Can ...

javascripthtmlcanvas

How to effectively extend the window.onload event handling function?

I've encountered a scenario where I need to incorporate my function, foo, into the existing window.onload event. However, there is already another function called bar assigned to the window.onload. Unfortunately, I don't have access to modify how ...

jqueryhtml

How to make a Material UI Dialog Box automatically expand to fit the Dialog Content Area

In my project, I am working on a Dialog component which has a maximum width and a minimum height. Inside the DialogContent, I want to have a Box element that stretches to fill out the remaining space of the DialogContent. The goal is to have a background i ...

cssreactjsmaterial-ui

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

cssangulartypescriptionic-frameworksass