I'm in the process of developing a user-friendly dashboard that incorporates Bootstrap 5.3.1's nested nav feature. However, I've encountered a problem where the navigation disappears when there is too much content on the page. To address this issue, I would like the left side of the navigation to remain sticky so that it stays visible as users scroll down the page.
Although I have attempted various solutions, none have been successful so far. Below is an example of my current code:
Get rid of h-100 align-items-stretch and specify the sticky position as sticky-top
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test page | Wolkie</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534273061c011c03">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aeppYC94HEpVNVgiZdgIC5+VNNDNGCHeKRN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="flex-column pe-4 border-end sticky-top">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#my-services">My Services</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#domains">Domains</a>
<a class="nav-link ms-3 my-1" href="#hosting">Hosting</a>
<a class="nav-link ms-3 my-1" href="#transfer">Transfer</a>
</nav>
<a class="nav-link" href="#my-profile">My Profile</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#account-details">Account Details</a>
<a class="nav-link ms-3 my-1" href="#change-password">Change Password</a>
<a class="nav-link ms-3 my-1" href="#newsletter">Newsletter</a>
</nav>
<a class="nav-link" href="#billing">Billing</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#overview">Overview</a>
<a class="nav-link ms-3 my-1" href="#payment-details">Payment Details</a>
</nav>
<a class="nav-link" href="#status">Status</a>
<a class="nav-link" href="#logout">Logout</a>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="my-services">
<h4>My Services</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
</div>
<!-- More content here -->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d1a5bea3bea1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bJLYdXoVjrBt8cqVSBeBNS5n7C8IVInixGAoxmnlMuBnbgrkm" crossorigin="anonymous"></script>
</body>
</html>Adjust the column size to "col-8" and use the style attribute with overflow-y: scroll property set to a height of 600px. This will ensure that both columns have similar sizes for a better user experience (Note: Debug directly on the browser for optimal results)!!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test page | MySite</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279647966">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end position-sticky">
<nav class="nav nav-pills flex-column">
/* Navigation Links Here */
</nav>
</nav>
</div>
<div class="col-8" style="overflow-y: scroll;height: 600px;">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
/* Content Sections Here */
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7dac7d8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>I've got a functioning slide toggle that works perfectly, except when I try to move it next to the form, it stops working. When placed within the form tag, the toggle fails to change on click and remains in a false state. I've checked out other ...
I've been working on a script that combines two PNG images - one as a watermark and the other as the source image. The idea is to blend these images together using the imagecopy function and display the result in the browser. However, despite my effor ...
Initially: https://i.sstatic.net/SLG7O.png After adding a new row and then removing it. https://i.sstatic.net/FegjK.png Why is this happening? When I set val(""), the textbox should have no value. What mistake did I make in my code? Please assist. Her ...
I am facing a frustrating issue with my code. Every time I toggle a checkbox, the parent element's click event also triggers. I have experimented with various solutions like: event.stopImmediatePropagation(); event.stopPropagation(); event.preventD ...
I am currently working on a code that allows me to show and hide a <div> element after clicking on an advertisement from any website. This advertisement is generated by a script. How can I implement the onclick event within the <script> tag? T ...
Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...
I am facing a situation where I need to uncheck a checkbox that is always checked based on user input from another section of my form. Specifically, I have implemented an onChange="functionName" event on a select box. Can someone guide me on how to accom ...
I'm having some trouble with implementing a horizontal scroll feature and can't seem to make it work. If you want to take a look, here is the fiddle Please provide me with assistance in identifying what mistakes I may be making edit Here is th ...
I'm facing a dilemma with my one-page website layout project. Instead of the conventional scroll down effect, I'd like to implement a design similar to www.xsbaltimore.com where users have to scroll up to view other sections. However, I'm un ...
I am currently working with a code snippet that looks like this: <div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel ...
Currently, I am working on a content page that uses a master page which includes a text box and a button. My goal is to have the button execute some JavaScript code before performing any other actions. At the moment, I am in the testing phase of this JavaS ...
I've successfully integrated a slideshow within a section tag using a div tag. To include text above the slideshow, I placed another div tag above the slideshow div. However, when adding more text, it causes the images in the slideshow to get pushed d ...
I have successfully uploaded multiple featured images to my WordPress website using the multiple post thumbnail plugin. Now, I want to showcase them all below the content along with their descriptions. While I have managed to display the main featured imag ...
I am attempting to input numeric values using a keyboard. My issue is as follows: the keyboard has an "Accept" button, and I have multiple text fields. I want to assign a different action for each text field. I attempted to use multiple attribute selector ...
I am facing an issue with removing HTML divs generated using jinja2 as shown below: {% for student in students %} <div class="item" id="{{ student.id }}_div"> <div class="right floated content"> <div class="negative ui button compa ...
I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...
I am currently utilizing the jQuery code below to dynamically create multiple input fields, which include time pickers and date pickers. However, I am encountering an issue where they are not functioning as expected. $('#add_another_event').clic ...
When I want to initially hide various content scattered around the page, I usually use the following jQuery code: $('#objective_details, #time_estimate_details, #team_members_details, #resources_details').hide(); Is there a method to utilize a ...
I am working on a shopping cart application and I want to incorporate a condensed version of the cart onto my home page. The main shopping cart page is called 'modcart.php' and I have managed to integrate it into my homepage using the following c ...
I am attempting to construct a grid using the Bootstrap 4 card component. After reviewing the documentation and utilizing the card-deck feature, I aim to have each row consist of two columns with the behavior similar to col-12 col-md-6. Additionally, the s ...