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
  • 166 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by almostbob

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.