Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hi All,

I was able to meet the requirements but i want to make my page better.
I got an issue with my navigation on the left. I got 14 links/buttons there but when the browser gets smaller for some reason the last link - “reference” cannot get scrolled. The scroll stops at Function declarations. If i add some empty links under “reference”, it can be seen again but i think it is not the most professional way.
Could you please help me find the solution for this one?
I link my nav codes here.
Thank you.

HTML

<nav id="navbar"> <div class="header"> <header class="navheader">JS Documentation</header> </div> <ul> <li><a href="#Introduction" class="nav-link">Introduction</a></li> <li><a href="#What_you_should_already_know" class="nav-link">What you should already know</a></li> <li><a href="#JavaScript_and_Java" class="nav-link">JavaScript and Java</a></li> <li><a href="#Hello_world" class="nav-link">Hello world</a></li> <li><a href="#Variables" class="nav-link">Variables</a></li> <li><a href="#Declaring_variables" class="nav-link">Declaring variables</a></li> <li><a href="#Variable_scope" class="nav-link">Variable scope</a></li> <li><a href="#Global_variables" class="nav-link">Global variables</a></li> <li><a href="#Constants" class="nav-link">Constants</a></li> <li><a href="#Data_types" class="nav-link">Data types</a></li> <li><a href="#if...else_statement" class="nav-link">if...else statement</a></li> <li><a href="#while_statement" class="nav-link">while statement</a></li> <li><a href="#Function_declarations" class="nav-link">Function declarations</a></li> <li><a href="#Reference" class="nav-link">Reference</a></li> </ul> </nav>

CSS

#navbar {
    position: fixed;
    width: 18.75rem;
    height: 100vh;
    margin: 0.5rem 0.5rem 0rem 0rem;
    border-right: 2px solid darkgray
}

.navheader {
    position: fixed;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0.95rem;
    z-index: 1;
    background-color: white;
}

nav ul {
    margin-top: 3.5rem;
    width: 100%;
    height: 100%;
    overflow: scroll;
}


nav ul li {
    list-style: none;
    border-top: 0.06rem solid black;
    padding: 0rem;
}

nav ul li a {
    text-decoration: none;
    color: rgb(77, 76, 76);
    display: block;
    padding: 0.95rem;
}


nav ul li:hover {
    background: black;
}

nav ul li a:hover {
    color: white
}
2

From I gathered that it is due to the height and overflow set on the nav ul. Moving the overflow to navbar class and setting the height to 100 in the class resolves the issue.

#navbar {
  position: fixed;
  width: 18.75rem;
  height: 100%;
  margin: 0.5rem 0.5rem 0rem 0rem;
  border-right: 2px solid darkgray;
  overflow-y: scroll;
}

.navheader {
  position: fixed;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 0.95rem;
  z-index: 1;
  background-color: white;
}

nav ul {
  margin-top: 3.5rem;
}

nav ul li {
  list-style: none;
  border-top: 0.06rem solid black;
  padding: 0rem;
}

nav ul li a {
  text-decoration: none;
  color: rgb(77, 76, 76);
  display: block;
  padding: 0.95rem;
}

nav ul li:hover {
  background: black;
}

nav ul li a:hover {
  color: white;
}
3

Thank you for your code.

It works but it gives me an other error.
In the example of this test
The scroll is next to only the li-s, it is not next to the header.
Your suggestion is solve my issue however my header does not fill the whole space and the scroll starts from the top.
Basically i would like to recreate the navbar that you can find in the example of the test

Here is my issue:
Screenshot 2023-02-09 at 21.53.50

here is my css again with the reset

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* _______________________________________________ */


#navbar {
    position: fixed;
    width: 18.75rem;
    height: 100vh;
    margin: 0.5rem 0.5rem 0rem 0rem;
    border-right: 2px solid darkgray;
    overflow-y: scroll;

}

.navheader {
    position: fixed;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0.95rem;
    z-index: 1;
    background-color: white;


}

nav ul {
    margin-top: 3.5rem;
     height: 100%;
    width: 100%;
    overflow: scroll; 
}


nav ul li {
    list-style: none;
    border-top: 0.06rem solid black;
    padding: 0rem;
}

nav ul li a {
    text-decoration: none;
    color: rgb(77, 76, 76);
    display: block;
    padding: 0.95rem;
}


nav ul li:hover {
    background: black;
}

nav ul li a:hover {
    color: white
}
5 
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* _______________________________________________ */

#navbar {
  position: fixed;
  width: 18.75rem;
  height: 100vh;
  margin: 0.5rem 0.5rem 0rem 0rem;
  border-right: 2px solid darkgray;
  overflow-y: scroll;
}
/* Changed from fixed to sticky */
.navheader {
  position: sticky;
  top: 0;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 0.95rem;
  z-index: 1;
  background-color: white;
  border-bottom: 0.06rem solid black;
}

/* The header was acting as a hidden buffer removing some of the height from the scroll wheel */
nav ul {
  height: calc(100% - 7rem);
  width: 100%;
  overflow: auto;
}

nav ul li {
  list-style: none;
  border-bottom: 0.06rem solid black;

  padding: 0rem;
}

nav ul li a {
  text-decoration: none;
  color: rgb(77, 76, 76);
  display: block;
  padding: 0.95rem;
}

nav ul li:hover {
  background: black;
}

nav ul li a:hover {
  color: white;
}
1 Like
6

Thank you so much for your help. :grinning:
It works perfectly.
Why did you deduct -7rem from nav ul? Just want to full understand your code. → height: calc(100%-7rem)?
I removed “overflow-y: scroll” as it gave an extra scroll space to my navbar.

with overflow-y: scroll
Screenshot 2023-02-10 at 12.27.35

7

A post was split to a new topic: Technical Documentation Page - Build a Technical Documentation Page