Creating a foundational design with Bootstrap 5, featuring a sidebar that scrolls seamlessly and a stunning fixed

I'm having some trouble figuring out the layout for a webapp I want to develop. LAYOUT IMAGE

What I envision is a sidebar menu on the "S" section that can be scrolled independently, and a large image on the "I" section that changes based on the selection made on the sidebar. The sidebar should be the only scrollable element on the page, while the image remains fixed in its position (but still responsive to screen size changes).

I've managed to create the navbar, but I'm struggling with the rest of the layout.

EDIT: Here is the code I've written so far.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d48534f534f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d20646e62637e4d3c2338233d">[email protected]</a>/font/bootstrap-icons.css">
                <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f435f43">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
                <!-- GENERAL CONTAINER -->
                <div class="container-fluid h-100 p-0">
                  <nav class="navbar navbar-expand-lg">
                    <div class="container-fluid">
                      <!-- LOGO -->
                      <a class="navbar-brand">
                        <img src="../images/Logo-blue.png" alt="LOGO" style="width: calc(7vh + 7vw)" />
                      </a>
                      <!-- USER ICON + USER NAME + USER OPTION CONTAINER -->
                      <div class="dropdown pe-5">
                        <a class="btn text-white dropdown-toggle btntoggle text-uppercase" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                          <!-- USER ICON -->
                          <i class="bi bi-person-circle pe-1"></i>
                          <!-- USER NAME -->
                          Judith Scoltock
                        </a>
                        <!-- USER OPTION -->
                        <ul class="dropdown-menu menu" aria-labelledby="dropdownMenuLink">
                          <li><a class="dropdown-item user-item text-white" href="#">Personalize Profile</a></li>
                          <li><a class="dropdown-item user-item text-white" href="#">My Workouts</a></li>
                          <li><a class="dropdown-item user-item text-white" href="#">Ranking</a></li>
                          <li><a class="dropdown-item user-item text-white" href="#">Access Course</a></li>
                          <li><a class="dropdown-item user-item text-white" href="#">Contact Us</a></li>
                          <li><a class="dropdown-item user-item text-white" href="#">Exit</a></li>
                        </ul>
                      </div>
                    </div>
                  </nav>
                  <div class="container-fluid">
                    <div class="row h-100">
                      <!-- MENU CONTAINER -->
                      <div class="col-lg-3 col-md-3 col-sm-4 scroll">
                        MENU<br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> MENU
                        <br/> LAST
                        <br/>
                      </div>
                      <!-- IMAGES CONTAINER -->
                      <div class="col-lg-9 col-md-9 col-sm-8 border border-danger">
                        IMAGE
                      </div>
                    </div>
                  </div>
                </div>

htmlcssbootstrap-5

Answer №1

To achieve the desired UI, consider using a navbar for the logo-username and menu. Utilize a regular container with rows and columns, ensuring to adjust the paddings and gaps accordingly. For the mobile version, simply hide the menu and implement the offcanvas component from bootstrap5.

Here's an example structure: .navbar .container-fluid.p-0 .row.g-0 .col-md-3 "Menu" .col-md-9 "Image"

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

Troubleshooting issues with mail subscriptions using Ajax and PHP

My Idea for Implementation I successfully set up a subscription form using PHP initially. However, I wanted to enhance the user experience by implementing an Ajax feature that would display a nice image and a "thank you" message without reloading the pag ...

phphtmlajaxformsmailchimp

HTML/CSS code for a header with elements centered across the full width of the screen

Having an outdated WordPress theme from 2010, I wanted to give it a modern touch by adding a sticky header. I found a plugin called myStickymenu that seemed to work well. However, my current theme's header has a fixed width of 960px and I desired to m ...

htmlcssheaderwidth

Is there a way for me to determine if something is hidden?

My goal is to have selector B toggle when selector A is clicked or when clicking outside of selector B. This part is working fine. However, I'm struggling with preventing selector B from toggling back unless selector A is specifically clicked - not w ...

javascripthtmljquerycssfrontend

take a paragraph element outside of a container div

In my ASP project, I have incorporated JavaScript and CSS code that I obtained from JonDesign's SmoothGallery demo website. Now, I am trying to move the p tag containing the summary out of the div. Here is the current code snippet: <div id="myGall ...

asp.netcss

Elements that do not change when hovered over and that intersect

In the provided example, I am attempting to decrease the opacity of non-hover elements on an HTML page. The code snippet below successfully reduces the opacity of non-overlapping elements. However, when there is a background element that overlaps and shou ...

htmlcss

Enhancing Image Quality upon Hovering

Is there a way to prevent the content of the article from moving when an image becomes absolutely positioned? The issue I am facing is that the image overlaps its container with overflow: hidden only when the img is absolute positioned. article { back ...

htmlcssdom

Whenever I open my collapsible dropdown, it seems to leap up unexpectedly

When I interact with the collapsible card, it has a jerky animation. I would like it to open smoothly instead. The issue lies with the tooltip-cus class. If I remove position: relative;, the opening animation is smooth, but then the position of the toolti ...

htmlcssbootstrap-4

The buttons within the bootstrap navbar are not properly collapsing or resizing when the screen size is decreased, causing them to overlap and maintain their

As a newcomer to bootstrap, I recently created a navbar with several buttons. However, when I reduce the screen size to 1000 pixels, the button text gets overwritten and the navbar extends off the screen. I don't want the navbar to collapse at this si ...

htmlcssbootstrap-4bootstrap-5

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

cssnode.jsnpmsass

Instructions for changing the background of a specific area to gray

Could use some assistance in changing the red area to grey, tried numerous solutions but can't figure it out. Any help would be highly appreciated! Looking to change the background to a light grey excluding the top bar and navigation. Image Current ...

htmlcsstwitter-bootstrap

How can Styled Components be used to style a parent element based on a child element having either the aria-current attribute set to "page

Looking to customize the appearance of a parent div based on the presence of an applied aria-current="page" or an active class name in the child's Link. Example code: <NavBody> {items.map((subItem, key) => { const { title, li ...

reactjsparent-childstyled-componentsreact-bootstrapbootstrap-5

CSS3 functions properly on jFiddle, but is not compatible with Internet Explorer

This is a snippet of my code that includes a CSS animation. You can view the live version on JsFiddle here. When I open the JsFiddle link in IE, everything works perfectly as intended. However, when I try to run the same code locally, I encounter issues ...

cssinternet-explorer

|Webview|Best Practices for Integrating Upload Script

I am currently developing an Android app using WebView and I need to implement a code for uploading on Android. I came across the following code snippet and I want to convert it into JavaScript instead of Java (if possible). It needs to be linked to the up ...

javascriptjavaandroidhtmlwebview

Implementing JavaScript to Take an Array of Integers from an HTML Input Field and Sort It

Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...

javascripthtmlarrays

iOS does not support Css3 Transition

My Transition Code works on PC and android devices, but it does not work on iOS devices. I am only using HTML and CSS. /***** BOX 3 *****/ #box3 { height:240px; width:198px; border:1px solid #dedede; background-color:#fcfcfc; position:relative; overflow:h ...

htmlioscss

Tips for switching "a" tag elements to reveal concealed DIVs in a similar way to the Facebook notification center

I have a situation in my code where I need to toggle between two a elements to display a hidden div with content one at a time. This functionality is similar to how the Facebook notification center works when you click on the icons, which I'm sure mos ...

jqueryhtmlcss

.htaccess file is causing js and css files to not load

I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...

javascriptphpcssapache.htaccess

Modifying the value property of the parent element

Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...

javascriptjqueryhtml

The precedence of theme CSS is paramount

Check out this link for Smirnoff Espresso Vodka 70cl (password: hide) Upon inspecting the page source, you'll see that my main stylesheet (main-style) is loaded at the top of the head section with high priority, even above my theme's style. Why ...

csswordpress

exchanging the positions of two animated flipdivs

Hey there! I'm facing a little challenge with my two divs (let's call them div1 and div2). One of them has a flip animation on hover, while the other flips on toggle click. My goal is to swap these two divs by dragging and dropping them. I' ...

javascriptjqueryhtml