Creating a Fixed Sidebar, Navigation Bar, or Tabs in a Knowledge Article Template (Vancouver) code?

trout1974 · ‎08-15-2024

As close as I can get so far:
Fixed Sidebar:

.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 50px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 12px;
color: #2196F3;
display: block;
}

.sidenav a:hover {
color: #064579;
}

.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
font-size: 12px; /* Increased text to enable scrolling */
padding: 0px 5px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 12px;}
}
</style>
<div class="sidenav"><a href="#about" rel="nofollow">About</a> <a href="#services" rel="nofollow">Services</a> <a href="#clients" rel="nofollow">Clients</a> <a href="#contact" rel="nofollow">Contact</a></div>
<div class="main">
<h2><span style="font-size: 12pt;">Auto Sidebar</span></h2>
<p><span style="font-size: 10pt;">This sidebar is as tall as its content (the links), and is always shown.</span></p>
<p><span style="font-size: 10pt;">Scroll down the page to see the result.</span></p>
<p><span style="font-size: 10pt;">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</span></p>
<p><span style="font-size: 10pt;">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</span></p>
<p><span style="font-size: 10pt;">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</span></p>
<p><span style="font-size: 10pt;">Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</span></p>
</div>

Another:

.sidenav {
height: 100%;
width: 120px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 12px;
color: #818181;
display: block;
}

.sidenav a:hover {
color: #f1f1f1;
}

.main {
margin-left: 120px; /* Same as the width of the sidenav */
font-size: 10px; /* Increased text to enable scrolling */
padding: 0px 10px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 12px;}
}
</style>
<div class="sidenav"><a href="#about" rel="nofollow">About</a> <a href="#services" rel="nofollow">Services</a> <a href="#clients" rel="nofollow">Clients</a> <a href="#contact" rel="nofollow">Contact</a></div>
<div class="main">
<h2>Sidebar</h2>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

NAVIGATION BAR:

<ul>
<li><a class="active" href="#home" rel="nofollow">Home</a></li>
<li><a href="#news" rel="nofollow">News</a></li>
<li><a href="#contact" rel="nofollow">Contact</a></li>
<li><a href="#about" rel="nofollow">About</a></li>
</ul>
<div>
<h1><span style="font-size: 12pt;">Fixed Top Navigation Bar</span></h1>
<h2><span style="font-size: 12pt;">Scroll this page to see the effect</span></h2>
<h2><span style="font-size: 12pt;">The navigation bar will stay at the top of the page while scrolling</span></h2>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
<p><span style="font-size: 10pt;">Some text some text some text some text..</span></p>
</div>
<style>
body {margin:0;}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: flex;
top: 0;
width: 100%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04AA6D;
}
</style>

trout1974 · ‎08-21-2024

Got it working. If anyone wants the coding for a fixed scroll menu, just let me know