I'm not a full-time front end developer so this might be a simple question. I am attempting to add a vertical navigation box, similar to the blue box in this example (link: http://jsbin.com/oceguRa/2/edit?html,output). Is there a way to make this blue box fixed vertically instead of scrolling? Any guidance would be appreciated.
Thank you
include the style position: fixed; within your .nav-box class
Link to Example
If you're looking to solve this, simply include the CSS code position:fixed
<title>Unique Design for Scrolling Sidebar</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 600px; margin: 0 auto; position: relative; z-index: 1500; }
h1 { padding-top: 15px; }
p { margin: 0 0 15px 0; }
p:first-child { background: #fffcde; padding: 10px; }
#sidebar ul { background: #eee; padding: 10px; }
li { margin: 0 0 0 20px; }
#main { width: 390px; float: left; }
#sidebar { width: 190px; position: fixed; left: 50%; top: -45px; margin: 0 0 0 110px; z-index: 1000; }
#title-area { background: white; position: relative; z-index: 3000; }
#reveal { position: absolute; right: 0; bottom: -20px; z-index: 2000; }
</style>
<!--[if IE 6]>
<style type="text/css">
html, body { height: 100%; overflow: auto; }
#sidebar { position: absolute; }
#page-wrap { margin-top: -5px; }
#ie6-wrap { position: relative; height: 100%; overflow: auto; width: 100%; }
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#page-wrap { margin-top: -5px; }
#reveal { bottom: -10px; }
</style>
<![endif]-->
<div id="ie6-wrap">
<div id="page-wrap">
<div id="title-area">
<h1>Custom Scrollable Sidebar</h1>
<p>By <a href="http://css-tricks.com"><strong>CSS</strong>-Tricks</a></p>
<img src="images/reveal.png" alt="" id="reveal" />
</div>
<div id="main">
<p>Scroll down and observe the sidebar on the right as it moves along.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
<div id="sidebar">
<img src="images/logo.png" alt="logo" id="logo" />
<ul>
<li><a href="index.html">jQuery (animated)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
</ul>
</div>
utilize
position:sticky
XHTML
<div class="wrapper">
<div id="sidebar">
</div>
<div class="content">
</div>
</div>
Cascading Style Sheets
*
{margin:0;
padding:0;
}
.wrapper
{width:1200px;
margin:0 auto;
}
#sidebar
{width:25%;
height:200px;
background:#09F;
position:sticky;
}
.content
{width:70%;
height:1000px;
background:#093;
margin-left:30%;
}
Consider this snippet of code below <div> <img src="http://www.lorempixel/100/200" /> <p> Bla bla bla bla </p> </div> I am trying to figure out how to move the image 50% of its height and also adjust the ...
Currently, I'm encountering an issue with the font size in my PDF report when rendering an embedded HTML component using the following Java code: Snippet of my Java code : StringBuilder htmlBody = new StringBuilder(""); htmlBody.append("<p class= ...
Struggling to make my navigation bar collapsible on my site designed for a class project. Wondering if this requires both HTML and CSS, or can it be achieved with just HTML since this is my first time working on responsive design. Below is the code I have ...
Angular 13 is my framework of choice, and I recently integrated Bootstrap 5 into my project using the command below: ng add @ng-bootstrap/ng-bootstrap As for the index.js file content, it looks like this: <!doctype html> <html lang="en" ...
Having a small issue with using [value] in my input fields. This is the code snippet from my component .html file: <div class="form-group"> <mat-form-field class="example-full-width" style="padding-left: 15px;"& ...
One challenge I have is regarding a select input with the id "slt". I aim to extract the innertext of the selected value and then assign this text to another div. Initially, I was able to obtain the value with a specific code. However, now my goal is to cr ...
Check out these two fiddles: fiddle 1 and fiddle 2 The only variation between the two is a single CSS property in .category -webkit-user-select: none; In fiddle 2, when you click and drag an element, the cursor remains as a pointer instead of changing t ...
When attempting to open/select a context menu by right-clicking on an element on a page, I am encountering an issue. Despite using the Action class to execute the click operation, the contextClick() command seems to be performed at a different location on ...
In a basic login form, the login button is initially disabled with the following code: [disabled]="!password || !loginName" When Chrome's autocomplete feature fills in the values for loginName and password, the button remains disabled after the pa ...
Trying to create a form for an insurance company using basic HTML, CSS & JQuery. However, encountering an issue where I cannot proceed past the first page after clicking the Next button, and therefore unable to view the remaining 2 fieldsets. Can someone h ...
I'm currently utilizing Material-UI to construct a form using makeStyles and CSS-In-JS for styling purposes. I have a form component from the Material-UI library that I want to style according to my needs. My main focus is on how to address classes or ...
Whenever I click the toggle button, I notice that the menu (which I have set to appear on toggle) only shows for a brief moment before disappearing. As a beginner in bootstrap, I am sure I might have made some obvious mistakes. Any assistance would be gr ...
In this particular div, I have two spans enclosed. I've created a loader which features a circle filling up with red color repeatedly. While everything appears to be functioning smoothly in Google Chrome, there's a noticeable glitch when it comes ...
After searching on Stack Overflow (jquery select change event get selected option), I attempted to implement the provided code but did not make any progress. As the options are changed, the values concatenate to create a variable that points to a specific ...
I am looking to embed HTML code that is rendered by a PartialView. For instance, var partView = PartialView("myView", myModel); string content = ??; What should I replace the question marks with? ...
https://i.sstatic.net/fkIyh.png Currently, I am in the process of creating the layout for the page similar to the image provided. When a user selects option A from the sidebar, my goal is to display the corresponding content on the same page without navig ...
.b_btnWrapp .btn.btn_default:after { content: "\f054"; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 15px; right: 30px; } .b_btnWrapp .btn.btn_default:after:hover { content: "\f054"; fon ...
Does anyone know how to center pictures in an article horizontally? I've tried various techniques without success. If it would be helpful, I can share the CSS I currently have. However, I am open to starting from scratch with the CSS as well since I ...
My MUI React Component features a Card that contains an image and buttons <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]"> <img src={meme.url} className="center bg-cover" alt="" /> <Box cl ...
Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...