Tips for adjusting the side layout in Bootstrap

Is there a way to keep the side navigation fixed when scrolling down? See it in action here

<div class="page-container">  
<!-- top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">Project Name</a>
    </div>
   </div>
</div>

<div class="container">
  <div class="row row-offcanvas row-offcanvas-left">

    <!-- sidebar -->
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>              
        </ul>
    </div>

    <!-- main area -->
    <div class="col-xs-12 col-sm-9">
        <div id="scroller" style="background-color: gray; height: 800px">

        </div>


    </div>
</div>

Answer №1

If you simply include position:fixed in the .nav class, it will behave as you desire.

.nav{
   position:fixed;
}

View live demo

Answer №2

Give this a shot

.main-area {
float:right;
}
#sidebar {
position:fixed;
top: 80px;
left: 0;
}

Link to see it in action

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

Is it possible to change the hover highlight rotation on a link without affecting the surrounding elements?

Is it possible to rotate the highlight on a link when hovered? I'm new at this, so apologies if this question seems basic. This is how my css/html is currently structured: .links { display: block; } .links a { color: #000000; text-decoratio ...

"Troubleshooting IE-specific problem: Loading dropdown options dynamically with AJAX on change

Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...

Retrieve data in JSON format from an external source file

I've been attempting to retrieve JSON content from an external file named list.json, but unfortunately all of my efforts have been unsuccessful. I've created a prototype of my code on Jsfiddle (http://jsfiddle.net/ctmvcyy1/). I believe that the ...

What is the best way to style a tooltip in an ASP.NET application using CSS?

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { foreach (TableCell cell in e.Row.Cells) { ...

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

I'm a beginner in jQuery and JavaScript programming. While I've managed to use jQuery for my Ajax calls, I'm facing an issue that has me stumped. When making an Ajax call, I'm trying to return a complete HTML structure, specifically a ...

Is there a versatile spell-checking tool available for HTML text boxes?

When designing a text box in HTML, I want to provide real-time input validation and spell check for the user's text. My goal is to underline any spelling mistakes as they type. This seems like a basic feature, but I've yet to find a plugin or AP ...

I am experiencing an issue with my jQuery ajax where my return function is not working as expected

I'm currently working on the following code snippet: $("#upvote").click(function(){ var up = parseInt(document.getElementById('voteScore').innerHTML); up++; document.getElementById('voteScore').innerHTML = up; $.aj ...

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS

I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI ...

Steps to alter background image and adjust its height upon function activation

I am working on a search page with an advanced search option that only certain users can access. I need the height of my div to increase accordingly and also change the background image to a larger size when the advanced search is selected. How can I make ...

Conceal a specific entry in Django

I have a table displaying records from a model using a for loop. Each row has a button that, when clicked, removes the row. However, upon refreshing the page, the removed rows reappear. I want to prevent this. How can I achieve this? <tabl ...

Adjust the color of the active link on the page using Angular and CSS

I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to g ...

Tips for incorporating a background image using bootstrap

I am facing an issue with a large background image of size 1600 X 3700. When I try to add bootstrap to my project, the background image disappears and only the first 100px are visible. Can anyone provide guidance on the correct way to use bootstrap with ...

Error: The requested resource does not have the necessary 'Access-Control-Allow-Origin' header. This means that access from 'http://localhost:8000' is not permitted

I'm a beginner when it comes to AJAX calls and I am trying to create a mockup of the rottentomatoes search page. Although I am able to retrieve the correct JSON file, I am facing difficulties loading it onto my browser. Despite conducting some researc ...

An error occurred while trying to retrieve the message from the JSON data in PHP/AJ

i have created a form in a PHP file and I am sending a request to another PHP file (test2.php) using AJAX. However, when I receive the data back in AJAX and try to print it in id="txtHint2" (paragraph tag), it shows as undefined. What could be causing th ...

What is the reason behind the success of ajax POST compared to GET with Rails' json request?

Struggling to grasp the inner workings of ajax in relation to Rails. In a method of mine, depending on the selection made in an html select, I aim to load another select with the corresponding value from the first one. Noteworthy is that these selects are ...

Implementing personalized font styles in HTML on a WordPress platform

I recently followed a tutorial on how to upload custom fonts to my WordPress website, which you can find at the link below. I completed all the necessary steps, such as uploading to the ftp, modifying the header.php file to include the font stylesheet, and ...

I am experiencing difficulty getting my CSS styles to apply to my application that is being rendered using zappa, express, and node.js

Here is a link to my code: http://pastebin.com/jcLRCrQr Although everything else seems to be working fine - CSS sheets loading correctly, JavaScript files functioning properly - I am facing an issue where the styles are not being applied. An odd thing I ...

Navigating through drop-down menus using jQuery

I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

What is the best way to add <li> elements dynamically in an AngularJS application?

I am dealing with html code similar to this: <ul class="list"> <div ng-repeat="avis in avisData"> <li id="li"> <a class="item item-thumbnail-left" href=""><img src=data:image/jpeg;base64,{{avis.image ...