Member Avatar for PDB1982

I have a working code for a vertical navigation bar, but I want it to:

1). move along with me as I scroll down....
2). keep it on the left side and not interfer with the textual information in paragraphs...

here is my vertical navigation code:

ul#navigation {
	width: 12em;
}
ul#navigation li {
  list-style: none;
  background-color: #039;
  border-top: solid 1px #039;
  text-align: left;
  margin: 0;
}
ul#navigation li a {
  display: block;
  text-decoration: none;
  padding: .25em;
  border-bottom: 1px solid #3399FF;
  border-right: 1px solid #3399FF;
}
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #000000; } 
a:hover { background-color: #fff; }
p a:link, p a:visited { color: #000; }
Edited by PDB1982 because: n/a
  • 2 Contributors
  • 5 Replies
  • 179 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: this is a CSS job, not Java. was on the right track — use a fixed (or sticky) sidebar and give the page content room so text doesn't flow underneath it. The common problems when “position: fixed” appears not to work are: the stylesheet isn’t loading, the selector doesn’t match the HTML, an ancestor has a transform (which can alter fixed behavior), or you’re testing in an ancient browser (IE6 / old mobile Safari) that doesn’t support fixed positioning.

A practical, modern setup (replace selectors to match your markup):

/* keep the nav fixed on the left */
.side-nav {
  position: fixed;
  left: 12px;
  top: 20px;            /* set top or bottom explicitly as @almostbob suggested */
  width: 180px;
  z-index: 999;
}

/* make room for the fixed menu so paragraphs don't flow underneath */
.page-content {
  margin-left: 212px;   /* nav width + gap */
}

If you want the menu vertically centered on the left edge:

.side-nav {
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

Modern alternative: position: sticky inside a scrollable container can be nicer for long single-column layouts:

.side-nav { position: sticky; top: 20px; }

Finally, a quick debug checklist if it still "doesn’t work": add a valid DOCTYPE, inspect the element with DevTools to confirm the computed position, ensure no ancestor has transform/filter/will-change, test with a minimal HTML file, and try a browser other than IE6. If you must support extremely old browsers, use a small JavaScript fallback to move the element on scroll.

Recommended Answers

All 5 Replies

Member Avatar for almostbob 
ul#navigation { width: 12em; top: auto; left: 0; bottom: auto; right: auto; position: fixed;} /* should put the menu in the centre of the left edge of the page, you can set the position explicitly I didnt, I like left:auto;right:0; better to put the menu on the right side of the page where it doesnt matter not sure about text flow around the menu, dont have a menu to test it on */
ul#navigation li { list-style: none; background-color: #039; border-top: solid 1px #039; text-align: left; margin: 0; }
ul#navigation li a { display: block; text-decoration: none; padding: .25em; border-bottom: 1px solid #3399FF; border-right: 1px solid #3399FF; }
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #000000; } 
a:hover { background-color: #fff; }
p a:link, p a:visited { color: #000; }
Edited by almostbob because: n/a
Member Avatar for PDB1982 
ul#navigation { width: 12em; top: auto; left: 0; bottom: auto; right: auto; position: fixed;} /* should put the menu in the centre of the left edge of the page, you can set the position explicitly I didnt, I like left:auto;right:0; better to put the menu on the right side of the page where it doesnt matter not sure about text flow around the menu, dont have a menu to test it on */
ul#navigation li { list-style: none; background-color: #039; border-top: solid 1px #039; text-align: left; margin: 0; }
ul#navigation li a { display: block; text-decoration: none; padding: .25em; border-bottom: 1px solid #3399FF; border-right: 1px solid #3399FF; }
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #000000; } 
a:hover { background-color: #fff; }
p a:link, p a:visited { color: #000; }

Does this also keep the menu moving with me as I scroll? If so, it's not working for me, and I copied it directly from your post....Do I need to add anything else?

Member Avatar for almostbob

I use it to keep my logo in the bottom right corner of the page as .logo { top: auto; left: auto; bottom: 2px; right: 1px; position: fixed;} You may have to set either top or bottom to a measure to fix it in place, its been a while since I thought about it,
set either top or bottom to 100px as a test

Edited by almostbob because: n/a
Member Avatar for PDB1982

I use it to keep my logo in the bottom right corner of the page as .logo { top: auto; left: auto; bottom: 2px; right: 1px; position: fixed;} You may have to set either top or bottom to a measure to fix it in place, its been a while since I thought about it,
set either top or bottom to 100px as a test

It's still not workinf for me for some reason.....I hate to say this, but I think it might have something to do with Java

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.