An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the whole page starts scrolling instead of just the content inside the specific column.

.page-container {
     height: 100vh;
     display: flex;
     flex-direction: column;
}
 .page-container .page-container.nav-global {
     padding: 20px 20px;
     background-color: #fff;
     z-index: 999;
}
 .page-container .page-container.nav-global .nav-left {
     display: inline-block;
}
 .page-container .page-container.nav-global .nav-left a {
     color: #ccc;
     margin-right: 15px;
}
 .page-container .page-container.nav-global .nav-left > i {
     color: #ccc;
}
 .page-container .page-container.nav-global .nav-right {
     float: right;
}
 .page-container .page-content {
     border: none;
     flex-grow: 1;
     background-color: #eee;
}
 .page-container .page-content .filter {
     align-items: center;
     overflow-y: hidden;
}
 .page-container .page-content .result {
     border: none;
}
 .page-container .page-content .map {
     border: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class='page-container'>
    <nav class='nav-global'>
        <div class='row'>
            <div class='col-6'>
                <div class='nav-left'>
                    <a href='#'>
                        <i class="fas fa-bars fa-lg"></i>
                    </a> 
                    logo
                </div>
            </div>
            <div class='col-6'>
                <div class='nav-right'>
                    <i class="fas fa-lock fa-xs"></i> Join Now
                </div>
            </div>
        </div>
    </nav>

    <div class='page-content container-fluid'>
        <div class='row h-100'>
            <div class='col-3 filter'>
                scrol    
            </div>
            <div class='col-3 result'>
                CONTENT
            </div>
            <div class='col-6 map'>
                MPA
            </div>                                
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

cssbootstrap-4

Answer №1

Based on your query description, it appears that you are seeking a solution for a fixed layout where only the content within columns can be scrolled, rather than the entire page. To achieve this, set a specific height to the three divs and apply overflow-y:scroll. Refer to the code snippet provided below:

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-container .nav-global {
  padding: 20px 20px;
  background-color: #fff;
  z-index: 999;
  margin-right: 15px;
}

(page-container .page-container.nav-global .nav-left {display: inline-block;}

.page-container .page-container.nav-global .nav-left a {
  color: #ccc;
  margin-right: 15px;
}

.page-container .page-container.nav-global .nav-left>i {
  color: #ccc;
}

.page-container .page-container.nav-global .nav-right {
  float: right;
}

.page-container .page-content {
  border: none;
  background-color: #eee;
}

.page-container .page-content .filter,
.page-container .page-content .result,
.page-container .page-content .map {
  height: 200px;
  overflow-y: scroll;
  overflow-x: visible;
}

.page-container .page-content .filter {
  align-items: center;
}

.page-container .page-content .result {
  border: none;
}

.page-container .page-content .map {
  border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class='page-container'>
  <nav class='nav-global'>
    <div class='row'>
      <div class='col-6'>
        <div class='nav-left'>
          <a href='#'>
            <i class="fas fa-bars fa-lg"></i>
          </a>
          logo
        </div>
      </div>
      <div class='col-6'>
        <div class='nav-right'>
          <i class="fas fa-lock fa-xs"></i> Join Now
        </div>
      </div>
    </div>
  </nav>

  <div class='page-content container-fluid'>
    <div class='row h-100'>
      <div class='col-3 filter'>
        scrol <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
        qui officia deserunt mollit anim id est laborum incidi dunt ut labore et d
      </div>
      <div class='col-3 result'>
        CONTENT <br/> dolore magna aliqua. Ut enim ad minim Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborumveniam, quis nostrud exercitation ullamco
      </div>
      <div class='col-6 map'>
        MPA <br/> Duis aute irure dolor in reprehe nderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseruntLorem ipsum dolor sit amet, consectetur adipiscing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </div>
    </div>
  </div>
</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

Identifying Internet Explorer version through CSS functionality and feature detection

As of IE10, browser detection tags are no longer supported for identifying a browser. In order to detect IE10, I am utilizing JavaScript and a technique that tests for certain ms prefixed styles like msTouchAction and msWrapFlow. I would like to do the s ...

cssinternet-explorerinternet-explorer-11feature-detection

Can a FontAwesome icon be used as a button in Bootstrap?

Hi there, I'm trying to use a fontawesome icon as a button in my code. Here is what I have so far: <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

htmlcssbootstrap-4font-awesome

Boost the scrolling velocity of my sidebar using Jquery

Hello there, I am completely new to the world of web development and particularly to using JavaScript and jQuery. I am interested in learning how to adjust the speed at which my Sidebar scrolls down as the user navigates through the page. Here is the jQue ...

javascripthtmljquerycss

Is there a way to eliminate the CSS width and height properties and instead establish a custom max-width for an image tag?

Currently, I have incorporated my theme's CSS file into my application and it contains the following code: .status .who img { float: left; height: 40px; margin-right: 10px; width: 40px; } However, I want it to appear like this: .status .who ...

jqueryhtmlcss

The image selection triggers the appearance of an icon

In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected. Below are some image ...

javascriptjqueryhtmlcssonclick

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

htmlcsslayout

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Important: The height of <div> is set to 50px, and the line-height of <span> is also 50px When 'line-height' is not applied to the <span>, all elements align at the top of the parent. However, when 'line-height: 50px&apo ...

htmlcss

Learning to use Material-UI: Wrapping a list into columns

Currently, I am using Material-UI to display a list of checkboxes, similar to the example shown here. The problem arises when my list contains around 30 items and I am placing them inside a dialog box. I want the checkbox list items to stack vertically up ...

cssreactjsflexboxmaterial-ui

What's the best way to link up rotated div elements?

I'm currently attempting to connect rotated divs at a 45-degree angle, but I'm struggling to find the solution. Here is the current state of the page: Here is a screenshot of the page: https://i.sstatic.net/jqPYJ.png This is what I am aiming f ...

htmlcssbootstrap-5

Switch Between Different Background Colors for Table Rows With Each Click

This script changes colors when a row in a specific column is clicked: $(document).ready(function(){ $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $(this.parentNode).toggleClass("enroute"); }); }); CSS: .placed{ b ...

javascriptjqueryhtmlcss

When hovering over nav bar links, shadows are not displayed

When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...

htmlcss

Utilize express middleware for applying CSS styles in web development

How's it going? I've been experimenting with middleware in Express JS, like this: app.get ('/user/:school/:dual', function (req, res, next) {   ......   ...   ...... }); Everything seems to be working fine so far. But when I na ...

cssnode.jsexpressmiddleware

Tips for creating a sidebar table of contents with CSS

I'm looking to design a webpage with a side bar table of contents (TOC) similar to the one found here: The current placement of the TOC on the HTML page is as follows: <h2>Table of Contents</h2> <div id="text-table-of-contents&quo ...

htmlcsstableofcontents

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

javascriptjqueryhtmlcss

Unable to create circular dots within the Slick Slider widget

While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a sha ...

htmlcss

Homepage experiencing issues with Jquery slider functionality

I have been attempting to incorporate a slider on my magentogo store, but unfortunately, after following all the code from the demo example of the slider along with the necessary CSS, the slider refuses to work. The CSS is configured to display none, as th ...

jqueryhtmlcssmagento-go

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

javascriptcssreactjsmaterial-ui

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

I have a color picker that triggers the following jQuery script: //event.color.toHex() = hex color code $('#iframe-screen').contents().find('body a').css('color', event.color.toHex()); This script will change the color of al ...

javascriptjquerycssdom

Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...

htmlsentencecss

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

htmlcsshtml-listsinline