How can I prevent the scrollbar on the right from covering the top navbar in Bootstrap?

My website has a top fixed navbar and a left navbar. The issue arises when scrolling, as the right scrollbar overlaps with the top navbar. I want the left navbar to start below the top one.

To see a live example of the problem, check out this fiddle: https://jsfiddle.net/jsmnsLm7/. Make sure to resize your window to view all the features of my navbar setup.

Below is the code from the fiddle:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        (navbar code here)
    </div>
</nav>

<div class="container">
    <div class="row row-offcanvas row-offcanvas-left">
        (sidebar code here)
        <div class="col-sm-9 col-md-10 main" style="margin-left: 180px;">      
        </div>
    </div>
</div>

I've seen similar discussions on StackOverflow recommending adding position: fixed to the container's CSS. However, doing so fixes the left navbar to the very left of the page. I need it to be flexible and synchronized with the top navbar.

Any help or suggestions are greatly appreciated!

Answer №1

The approach by Tasos to conceal body overflow is a good starting point, but the use of javascript to define the height may not function correctly during browser resize events, particularly in Chrome 59 (and document.height is now considered deprecated).

If you opt for using position:absolute, along with top and bottom on main, you should be all set: https://jsfiddle.net/vvsp60ya/

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

nav {
  background-color: black;
  height: 50px;
  color: white;
}

h1 {
  padding: .5em;
  margin: 0;
}

main {
  position: absolute;
  top: 50px;
  bottom: 0;
  overflow-y: scroll;
}
<nav>
  <h1>Title</h1>
</nav>
<main>
  <div>
    text text text...
  </div>
</main>

Answer №2

To begin, you must instruct the body element to hide scroll bars by applying overflow:hidden;. Next, adjust the position of the .main element downward by 50px to account for the header height and allow scrolling with overflow-y: scroll;. It is important to note that .main requires a specific height, which can be achieved using JQuery to calculate the available window height minus the 50px allocated for the headers.

See it in action:

https://jsfiddle.net/ksroccd8/

Css Styles:

body {
    overflow:hidden;
}

.main {
    margin-top: 50px;
    overflow-y: scroll;
}

Javascript Code:

//calculate main element height based on window height
var height = $(window).height() - 50;

$(".main").height(height);

It is crucial to reevaluate the height of .main when resizing the window. This can be done by implementing a window resize function as shown below:

Resize Function:

window.onresize = function(event) {
    var height = $(window).height() - 50;

    $(".main").height(height);
};

View updated demo here:

https://jsfiddle.net/a88n0aet/

Answer №3

One potential improvement to consider for @Tasos' approach.

$(document).ready(function() {
    $(window).resize(function() {
        adjustSize();
    }); 
    function adjustSize() {
        var newHeight = $(window).outerHeight(true) - 50;
        $('.main').outerHeight(newHeight);
    }
    adjustSize();
});

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

How can I insert a video using an iframe tag?

I tried integrating this code to embed a video, but unfortunately, it's not working. Do you have any suggestions on how to fix this issue? <!DOCTYPE html> <html> <body> <iframe src="https://vimeo.com/63534746"></iframe> ...

The Google API is experiencing issues when using input that has been added on

Situation: In my attempt to integrate a Google address search feature into an online shopping website, I encountered a challenge. I don't have direct access to the website's HTML code, but I can insert code snippets in the header, footer, and in ...

Is it necessary to send form data back with Express, or is there an alternative solution?

I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...

What is the best method to ensure that none of the select option values are left empty?

I have a total of 5 select option drop down menus currently, but this number may increase in the future depending on requirements. The issue I'm facing is that when I select the last element, it returns true even though the other elements are empty. I ...

Creating a visually appealing lineup of images with CSS3 and optimal methods

Hey there, I'm diving into the world of HTML5 and CSS3 and feeling a bit lost. Can't seem to find the right solution for what should be a simple task. My goal is to create a line of clickable images/links on my website similar to how Stack Overfl ...

The Javascript toggle for hiding and showing did not function as expected

I've been attempting to create a JavaScript toggle so that when I click on any of the buttons below, only that particular div is shown and all others are hidden. Unfortunately, my code is not working as expected: function toggle(show,hide) { do ...

Upgrade background image for high-resolution screens for optimal viewing

After encountering an issue with my background image appearing cloudy and stretched on retina-ready devices, I am seeking the best approach to replace it with a high-resolution version on such devices. Should I utilize media queries, incorporate JavaScri ...

Issue: Unable to locate a change supporting element '[object Object]' of the type 'object - Angular 7'

An angular service has been created for the specified purpose: CheckTicket(barcode, codEspec, diaHoraEspec):Observable<Ticket[]>{ //read ticket return this.http.get<Ticket[]>(`${this.checkticket_url}${barcode}?token=${this.token}&a ...

What is the best method for securely transferring login credentials from foo.com to bar.com?

I currently manage two websites, and . The actual application resides on bar.com, but clients prefer applicants to log in through foo.com. In the past, I have logged in at www.bar.com, but now I am looking to implement a secure form on foo.com that allows ...

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

Creating a CSS layout where a square remains confined within another square even as the screen size changes can be achieved by implementing specific styling techniques and

I have a group of squares that I want to resize proportionally when the screen size changes, but they keep overlapping instead HTML <div id="Container"> <div id="smallSquare1">square 1</div> <div id="smallSqu ...

Guide on aligning a popup next to the button that activated it using CSS and JavaScript

I am currently generating a dynamic quantity of divs, each containing a button that triggers a popup when clicked. I am attempting to position the popup below the specific button that activated it, but it remains static and does not move accordingly. <d ...

Custom property fallback values do not function properly with CSS Variables

I defined a custom property in the :root selector as shown below, but for some reason my color is not rendering correctly. Can someone please help me identify what I am doing wrong? :root { --color-primary: var(--color-primary, #ffc107); } body { ...

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Is there a way to change the positioning of a button in a window using JavaScript and Electron? I am trying to create new input boxes next to existing ones, but they always appear below the last one created. Is it possible to specify x and y coordinates fo ...

Problem with Bootstrap 5.3 navbar dropdown functionality not functioning as expected

I'm facing an issue with my code. I attempted to use both bootstrap 5.2 and 5.1, but neither seems to be working for me. I've tried opening it in both Chrome and Firefox, but the dropdown functionality is not functioning in either browser. Does a ...

In what way can the name of an event be made dynamic in a Node.js environment?

I am currently working on creating a dynamic EventEmitter in Node.js. I am wondering how to have the event name change dynamically. See the code snippet below: const express = require('express'); const app = express(); const server = require(&a ...

Having trouble opening or closing the nav menu with a click?

I've been struggling to get my hamburger menu to work properly for a while now. I've tried various solutions, but it seems like I just can't get it to open (Menu not opening is the issue :( ), The tutorial I followed to create this menu can ...

Adjusting video size in carousel (Bootstrap 4.0)

My school project requires me to create a website with a video slider, and I decided to use Bootstrap 4.0 for this task. I have successfully implemented a template from Bootstrap, but I am facing an issue with the video not fitting properly within the slid ...

Implement the Facebook comments widget inside a Bootstrap tab feature

I am attempting to incorporate the Facebook Comments widget into a bootstrap 2 tab set. However, when the comments are placed in a tab other than the default or shown tab, the FB comments iFrame does not appear upon tab selection. For an example, please v ...

Tips for showing an image in a PHP document

UPDATE: Successfully resolved the issue by avoiding absolute file paths (../Images\City of Bath College Logo.jpg). 2nd UPDATE: Also implemented the same fix for the CSS file and now it functions "the HTML way". I'm encountering a problem displa ...