Technical Documentation Project - Fixed Navi and Width

Hello everyone,

Thanks for reading and helping out in advance.

I am currently re-creating the technical documentation project and stuck on 2 things.

  1. How do i get the “JS Documentation” to become fixed while scrolling down side nav. I thought i had that done with position: fixed in .side-bar

  2. Having issues with main information bleeding into the side nav and outside the page on the right. - I set the margin to start at 345px, but when i scroll it bleeds into nav. - (not sure how to ask this question, hope it makes sense)

Trying to mimic the project site, while adding a few things of my own. Any help would be appreciated.

First try to see if you can fix the syntax error identified using the Analyze HTML feature of Codpen. You have some elements nested incorrectly in other elements.

I found at least one case where you did not close a ul element and another case where you had

<pre><code> but then closed the pre before the code.

To access the Analyze HTML feature, click on the dropdown on the upper right hand side of the HTML module.


Maybe once you fix the syntax errors identified, it could “fix” your problems. No guarantees, but you should fix those anyway to prevent problems on various browsers. Let us know if you still have trouble once you have fixes the issues.

Thank you @RandellDawson

I did not know that was an option on Codepen. I am still very new to coding that that definitely helped.

I was able to fix the syntax errors provided (need to slow down a little when writing). - I guess back to square 1 on my questions while i continue to research.

Hello, what a beautiful page!

I have modified this part of your code:

.side-header {
  position: fixed;
/*   padding: 15px; */
  font-size: 27.5px;
  margin: 0;
  border-bottom: 2px solid red;
  font-family: rock salt;
  z-index: 1;

And added this:

/* Here, to control the *distance* between the _header_ and the _first list item_ */
  margin-top: 90px;

This solved the problem, you can view the page here. Now you can style the header button.

Finally, I have solved the “bleeding” (i.e overflow) problem by setting the .main-doc width to 748px:

.main-doc {
  width: 748px;
  margin-left: 345px;
  padding-bottom: 50px;

Great work!

To make it easier to grasp, you can use the calc() function as follow:

You want your .main-doc to occupy all the remaining space after the .side-bar:

So, if (345 /944) * 100 = 36.5%, 345 is the margin-left and 944 is the entire page width.

Then use calc function as follows:

.main-doc {
  width: calc(100% - 36.5%);
  margin-left: 345px;
  padding-bottom: 50px;

This will stop the bleeding of the content, but the horizontal scroll bar is still seen, to fix that you can decrease the width a little bit to be:

width: calc(100% - 37%);

I hope this helps.

Thank you for the response!

My apologies I deleted the previous reply by mistake.

I definitely understand a little bit better now - Now to work on responsiveness :slight_smile:

1 Like