top



Hello Vici- here,

I was wondering if I could get some coding support to help develop a similar navigation bar on the left. First off, is this bar developed from HTML? Also, I was wondering how when scrolling, it does not move.

Thank-you,
Vici-

Yes, it is HTML. The stickyness is called an fixed value to the position CSS tag Razz

Code:
<div style="position: fixed; left: 0px; right: 0; bottom:0; top: 0; margin: 0px auto; vertical-align:center;">Fixed div! Add whatever to me!</div>

And the CSS is

Code:
#sidenav {
filter:alpha(opacity=50); opacity:0.5;
-moz-transition-duration: 1.0s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
}

#sidenav:hover{
 filter:alpha(opacity=100); opacity:1.0;
}

Search online for the jquery Wink

Ah... Thank-you! Time to experiment. Razz

Sorry for bothering you again but I have a few questions. Razz I have limited knowledge of CSS and jquery. First off, I was wondering where I would put these codes on my forum. Second, does the CSS go after the DIV tags or in between where you would put your information. Third, when you said to put "whatever you want here" would I put img src and a href there? o-o. I am still a beginner. Razz

The following sticky effect may be achieved by using the CSS fixed property. You should paste something like this into your forum's CSS.

Navigate to: ACP » Display » Colors » CSS StyleSheet

Paste:
Code:
#evil {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 5px;
  vertical-align: center;
  z-index: 1000; /* This code makes the div float over everything */
  }

Navigate to: ACP » Display » General » Homepage message

Paste:
Code:
<div id="evil"> </div>

Now paste whatever you want inside the HTML tags.

Perhaps an image? <img src="IMG URL" />  or maybe an link? <a href="LINK"> </a> or maybe link and image? <a href="LINK"><img src="IMAGE URL" /></a>

Everything is possible, feel free to ask for more help if needed!

Please refrain from double/triple posting.

Thank-you sir! Time for me to experiment more. Razz

Edit: Thank-you sir. Now I need some more assistance if you don't mind. Razz I have posted the code that you have written me. I have a question though. How would I move the icons down so it would be aligned center? My icons are aligned like the "Background Music Toggle". I would like it moved down so it would be centered.

Just add

Code:
margin-top: 100px;

or only:

Code:
top:100px;

Thank-you! Smile

Topic Solved & Locked.