Technical Documentation Project - Fixed Navi and Width

HTML-CSS
1

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.

3

Thank you @camperextraordinaire

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.

4

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_ */
li:first-of-type{
  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!

6

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.

7

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