Having difficulty in making the left sidebar stay fixed

In my web layout, I have a left-sided sideNav div and a right-sided main div set up as follows:

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
}
<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10">
    ...
  </main>
</div>

Although the code functions correctly, I am encountering an issue where the left portion of main is positioned behind sideNav. Removing the position property from the sideNav CSS resolves this problem, but then sideNav loses its fixed positioning and scrolls with the page.

How can I maintain the fixed positioning of sideNav while ensuring that my divs are displayed properly?

htmlcssbootstrap-4

Answer №1

Your issue lies in the fact that the row has a display type of flex, which causes all the columns below it to fit within that row.

The columns are treated as blocks spaced according to their designated value, such as col-3 or col-4.

When you change the column display type (to fixed in your case), you are essentially removing it from the flex spacing, causing your main nav to shift left because there is no offset applied.

To address this problem, do not rely on adding padding as some have suggested. Bootstrap provides classes designed to handle this situation. Instead, apply the offset-2 class to your main nav while leaving everything else unchanged.

Here's an example snippet:

#sideNav {
      background-color: #012d20;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      overflow: hidden;
      border-right-style: groove;
      height: 100vh;
    }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10 offset-2">
    ...
  </main>
</div>

Answer №2

Fixed positioning is often overlooked in favor of other layout options since it behaves similarly to absolute positioning within containers. One workaround is to set a fixed width for your sidebar and add padding to your main content area.

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
  width: 350px;
}

main {
  padding-left: 350px;
}

Check out the code on Codepen

Answer №3

Let's give this a shot,

I am setting the width for sideNav to be around 40px; I'm also applying the same left padding to #main-content.

html

<div class="row">
   <!-- navigation sidebar -->
   <div class="col-2 pt-5" id="sideNav">
      <p>paragraph...</p>
   </div>
   <!-- main content area -->
   <main class="col-10" id="main-content">
      <p>paragraph...</p>
      <p>paragraph...</p>
   </main>
</div>

css

#sideNav {
    background-color: #012d20;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    border-right-style: groove;
    height: 100%;
    width: 40px;
 }

#main-content{
    width: 100%;
    float: left;
    padding: 0 0 0 40px;
    background: yellow;
}

Answer №4

It appears that you are utilizing the bootstrap grid system. To ensure proper functionality of the grid, I suggest placing your fixed container within the .col-2 div.

 #sideNav {
      background-color: #012d20;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      overflow: hidden;
      border-right-style: groove;
      height: 100vh;
    }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <!-- navigation sidebar -->
      <div class="col-2 pt-5">
        <div id="sideNav">
          ...
        </div>
      </div>

      <!-- main content area -->
      <main class="col-10">
        ...
      </main>
    </div>

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

Tips for changing a div's visibility with radio buttons in jQuery

$(':radio').change(function(event) { var id = $(this).data('id'); $('#' + id).addClass('none').siblings().removeClass('none'); }); .none { display: none; } <script src="https://ajax.googleapis.com/ ...

jqueryhtml

Optimal Placement of CSS and index.html Files in ReactJS with Redux

Currently, my setup for the index.html file looks like this: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Pra ...

javascripthtmlcssreactjs

What could be causing my script to not execute properly?

I have reviewed my script multiple times and I am completely stumped as to why it is not running at all. Any assistance would be greatly appreciated... This is the script in question.... </head> <script type="text/javascript> $(document) ...

jqueryhtml

Guide to dynamically loading HTML and scripts as requested by the user

As I embark on creating my first single page application, I am faced with a challenge. The application contains an overwhelming amount of HTML code that I do not want to be loaded all at once on the client side. Instead, I would like to load the HTML conte ...

htmlasp.net

AngularJS object array function parameter is not defined

Recently, I've been honing my AngularJS1x skills by following tutorials on Lynda and Udemy. One tutorial involved creating a multiple choice quiz. To test my understanding, I decided to modify the code and transform it into a fill-in-the-blank quiz. ...

javascripthtmlangularjsfunction

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

On both desktop and mobile screen sizes, I have a white navigation bar. However, for the mobile dropdown menu, I want the background to be grey. I managed to achieve this by targeting .show on smaller screens in the CSS and specifying the grey background ...

javascriptcssbootstrap-4nav

"Discover the step-by-step process of transforming an input field value into a checkbox with

I've been experimenting with creating a To-Do list using HTML, CSS, and Javascript. I've managed to capture the input field value in a fieldset so far. However, my goal is to find a way to transform the input field value from the textfield into a ...

javascripthtmljquerycheckboxinput-field

The most sophisticated method for creating a 2x2 grid of divs

I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...

htmlcssangularjs

Menu options displayed with the help of HTML5 tags

Currently, I am experimenting with creating an interactive HTML5 dropdown menu in my spare time. While researching on W3Schools about dropdown menus, I noticed that all of them utilize CSS classes and id's for styling. This is a snippet of the HTML c ...

htmlcssdrop-down-menunavdropdown

Adjust the transparency of an image within an overlay when clicked on the overlay

Having an overlay on a Google map with two images contained within it, I am looking to adjust the opacity of the images when a user clicks on the overlay or on top of an image within the overlay. I attempted to utilize domlistener, but it did not yield the ...

javascripthtmlcssgoogle-maps-api-3

Could HTML code be inserted into the <Head> section of a NextJS page?

I need to add meta tags retrieved from the backend for a certain page to the Head section of my page component. In React, I know that I can incorporate HTML using <div dangerouslySetInnerHTML={{__html: response.someHtml}} />. Can this same method b ...

htmlnext.jsmeta-tags

display the information stored within the sports attribute using React

I am attempting to display the values stored in the sports property. So, I inserted a console log within the sports property. However, an error is being thrown: Syntax error: C:/codebase/src/containers/sports.js: Unexpected token, expec ...

javascripthtmlcssreactjsredux

What is preventing the assignment of a class attribute inline using JavaScript?

<html> <head> <style> .tagging { border: 1px solid black; width: 20px; height: 30px; } </style> <script> window.onload = function() { var div = document.getE ...

javascriptcss

Main wrapper with CSS sticky footer and top margin

Currently, I am using the sticky footer code from http://ryanfait.com/sticky-footer/ and it works perfectly except for when I need to add margin or padding at the top of the page. The design I am working with includes a patterned body with all the content ...

htmlcss

Issues with media query functionality (Media queries behaving unexpectedly after CSS styling)

https://i.sstatic.net/L7JNq.jpg Hello everyone, I need some help figuring out why my media query is not working properly. The attached photo shows that I have styled a contact page using HTML and CSS. After styling it, I attempted to make it responsive b ...

htmlcssmedia-queries

I am attempting to make the fade in and out effect function properly in my slideshow

I've encountered an issue where the fading effect only occurs when the page initially loads and solely on the first image. Subsequently, the fading effect does not work on any other images displayed. This is the CSS code I have implemented by adding ...

csstypescriptsveltekit

Struggling to line up text boxes with CSS borders within div elements in a neat row

Here is the HTML snippet with a div containing four sub divs with a class named 'city' that I'm trying to align in one row using Bootstrap. I have included my stylesheet below the HTML, and despite spending over an hour adjusting margins, I ...

htmlcsstwitter-bootstrapresponsive-design

Viewing saved information prior to saving - JavaScript

I'm looking for a solution to allow users to preview captured records before they are inserted. Any suggestions on how to achieve this? HTML.html <form id="view" method="POST" class="formular"> <label>Name</label> ...

javascripthtmlphonegap

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

Error in HTML: The AgGrid component is missing the required 'col' attribute

Initially, I worked with the 2.3.5 version of Ag-Grid which had a "col" attribute showing the relative index of the column for each cell element. The "row" attribute still remains unchanged. However, after upgrading to version 4.0.5, the "col" attribute ...

htmlangularjsag-grid