Toggle menu

website: www.vielamort.net

Alright, so i have a quite large fixed menu, which i'd like to hide when choosen to. Much like the option you have here on forum support where you can hide the menu in the right upper corner.

I'd like to know, how do you do that, in a tutorial, and how you make it appear from the top, left or right if possible? (:

Hello Please read the following thread in our Tricks and tips forum
https://help.forumotion.com/t78898-show-hide-widgets-script

Please remember most of what you are asking can be found in that same forum.
Remember always look in the    Tips & Tricks before posting

Thank you.

APE.

Hey I made similar thing for a link to scroll to the top of the page.
To make your desired element appear after you scroll certain amount use something like this:

Code:

$(window).scroll(function () {
        if ($(this).scrollTop() > 700) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

scrollup - is the class assigned to your menu element for example.
700 - the amount how much you have to scroll for your element to appear

Something didn't work as it should.. I'm not sure what it is that i did wrong?

What code you using ?

The one in the tutorial you sent :

I put this in overall_header

Code:


 <li id="menu-hide" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://2img.net/i/fa/optimisation_fdf/common/arrow_rtl.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('menuhide')=='0') { my_setcookie('navbar','1',0,0); jQuery('#menu-hide').css('background-position','0 -13px');  jQuery('#navbar div#navbar.fixed').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#navbar').css('background-position','0 0px'); jQuery('#topnav ul #topnav li').css('margin-right','0px'); }"></li>

          <script type="text/javascript"> jQuery('#navbar').insertBefore('#right'); if(my_getcookie('navbar')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#navbar').css('background-position','0 0px');  jQuery('#navbar div#navbar.fixed').css('margin-right','0px');} </script>

This in CSS

Code:


#menu-hide {
  background: url('http://i.imgur.com/1EgSZXQ.png');
  height: 50px;
  width: auto;
  float:right;
  padding-right:20px;
}


You add the code to a widget, not a template.

but its not the widgets i want to toggle, its the menu.

Try @Kami-sama JavaScript.

Now somethings definetly wrong, i can't scroll on the forum at all.. ?

Make sure your elements initial position is:

Code: position: fixed;

and also for example:

Code: top: 0;

Ive overlooked it all and can't seem to find whats wrong: my entire css:

Code:

/*-Fora-*/
body {
  background: #404331 url(https://www.transparenttextures.com/patterns/brushed-alum-dark.png);
  font: 13px/22px 'Lato', 'Arial', sans-serif;
  margin: 0 auto;
  padding: 0;
}
.pun {
  font: 13px/22px 'Lato', 'Arial', sans-serif;
  margin: 0 auto;
  padding: 0;
  width: 99.8%;
  border: 1px solid #1a1a1a;
  margin-top:-31px;
}
body, td, th, tr {
  color: #1e1e1e;
}
.wrapper {
  margin: 0 auto;
  width: 80% !important;
  margin-top: 30px;
}
-o-prefocus, .wrapper {
    margin: 30px auto 0;
    min-width: 1185px;
    width: 1212px!important;
}
a {
  text-decoration: none;
  outline: none;
  -o-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
a:hover, #footer a:hover {
  text-decoration: underline;
  cursor: pointer;
}
.pun a:link {
  color: #3a3a3a;
}
.pun a:visited {
  color: #3a3a3a;
}
.pun a:hover {
  color: #91BC8B;
  text-decoration: underline;
  cursor: pointer;
}
@font-face{
  font-family:Lato;
  font-style:normal;
  font-weight:400;
  src:local('Lato Regular'), local(Lato-Regular), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format("woff")
}
@font-face{
  font-family:Lato;
  font-style:normal;
  font-weight:700;
  src:local('Lato Bold'), local(Lato-Bold), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format("woff")
}
#tabs {
  width: 980px;
  margin-left: -15px;
}
/*-Header-*/
#header {
  height: 90px;
  background: url(http://i.imgur.com/EtVNgYr.jpg);
  height: 400px;
  background-position: 30% 20%;
}
#logo {
  display: block;
  float: left;
  width: 600px;
  height: 200px;
  background: url(http://i.imgur.com/lNj3wCR.png) 50% 0 no-repeat;
  margin-top: 100px;
  margin-left: -100px;
}
#describ {
  font-family: tahoma;
  font-size: 10px;
  text-transform:uppercase;
  margin-right: 50px;
  float: right;
  letter-spacing: 0.8px;
  margin-top: 100px;
  color: #7e7e7e;
  text-align:center;
}
#search {
  float: right;
  width: 240px;
  height: 32px;
  border: 1px solid #76abb5;
  margin-top: 65px;
  border-radius: 5px;
  margin-right: -230px;
}
span, form, p {
  margin: 0;
  padding: 0;
}
#search input {
  float: left;
  background: none;
  border: none;
  outline: none;
  padding: 0;
}
#search input[type=text] {
  width: 186px;
  height: 16px;
  line-height: 16px;
  padding: 8px 10px;
  color: #C0F0F0;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
}
#search input[type=submit] {
  background: url(http://i.imgur.com/tjwe4L1.png) 0 0 no-repeat;
  border-left: 1px solid #76abb5;
  border-radius: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
#search input[type=text]:focus {
  background: transparent;
  color: #D3FFFF;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
input, button, select, textarea {
  font: 95%/115% 'Lato', sans-serif;
  color: #4F5961;
  background: #fff;
  border: 1px solid #7f9db9;
  padding: 5px;
  border-radius: 3px;
}
/*-Navbar-*/
#navbar {
    background:#fff;
    color:#FFF;
    height:50px;
    padding:.5em;
    position:absolute;
    width: 98.96%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
    border-top: 2px solid #7CB0B8;
}
div#navbar.fixed {
    position: fixed;
    top: 30px;
    z-index: 999;
}
#topnav, #topnav ul {
  margin: 0;
  padding: 0;
  z-index: 999;
}
#topnav li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}
#topnav > li > a.active {
  background-color: #79D3C1;
  color: #fff;
  margin-top: -30px;
}
#topnav > li > a {
  line-height: 50px;
  padding: 0 18px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #555F67;
  margin-top: -30px;
}
#topnav li a {
  display: block;
  text-decoration: none;
  -o-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-in-out;
}
#topnav > li:hover > a {
  background: #4D5760;
  color: #fff;
}
#topnav > li {
  margin-right: 2px;
  padding-bottom: 5px;
}
#topnav li ul {
  position: absolute;
  width: 210px;
  left: -999em;
  padding: 5px 0;
  background: #4D5760;
  border-radius: 5px;
  margin-top: -30px;
}
#topnav li:hover ul {
  left: 0;
  top: 52px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
#topnav li li {
  width: 200px;
  height: auto;
}
#topnav li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}
#topnav li li a {
  color: #fff;
  line-height: 30px;
  font-size: 13px;
}
#topnav li li a {
  display: block;
  width: 174px;
  padding: 0 18px;
  color: #fff;
  height: auto;
  float: none;
  line-height: 30px;
  font-size: 13px;
}
#topnav > li {
  margin-right: 2px;
  padding-bottom: 5px;
}
#topnav li ul {
  position: absolute;
  width: 210px;
  left: -999em;
  padding: 5px 0;
  background: #4D5760;
  border-radius: 5px;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul {
  left: 190px;
  top: 0;
}
#topnav ul li a:hover {
  color: #85F6F5;
}
#topnav li li {
  width: 200px;
  height: auto;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul {
  top: -999em;
  left: auto;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul {
  left: 190px;
  top: 0;
}
/*-Board Notice-*/
#board-notice {
  padding: 20px 0;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
}
/*-Toolbar-*/
#content-wrapper {
  margin-bottom: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
#pun-visit, .main-box {
  display: inline-block;
  width: 97.5%;
  background-color: #cfcfcf;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 2px;
  border: 1px solid #9e9e9e;
}
#toolbar {
  height: 60px;
  background-color: #80A461;
  background-image: linear-gradient(#80A461, #3F5748);
  border-bottom: 1px solid #3F5748;
}
#toolbar a {
  color: #dde7c9;
  font-size: 13px;
  font-family: 'Lato', sans-serif;
}
#quicknav {
  float: left;
  margin: 15px 0 0 15px;
}
#quicknav ul {
  margin: 0;
  padding: 0;
}
#quicknav li {
  float: left;
  list-style: none;
  margin: 0 3px 0 0;
  padding: 0;
}
#quicknav li.social a {
  background: #fff url(http://i.imgur.com/5ZzJfCW.png) no-repeat;
  height: 34px;
  width: 34px;
  padding: 0;
  text-indent: -9999px;
  border-radius: 34px;
}

#quicknav li a {
  display: block;
  padding: 0 0 0 15px;
  line-height: 34px;
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
}
#quicknav li a:hover {
  text-decoration: none;
}
#account {
  float: right;
  margin: 15px 15px 0 -15px;
}
#account input[type=text], #account input[type=password] {
  background: #566069;
  border: 1px solid #45494F;
  width: 120px;
  height: 18px;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
}
#account input[type=text]:focus, #account input[type=password]:focus {
  background: #4C565F;
  border-radius: 5px;
  color: #9BA5AE;
}
#account input {
  float: left;
  border: none;
  outline: none;
  padding: 0;
  margin-left: 5px;
  color: #7A848D;
  line-height: 1;
}
#account input[type=submit], #account a.signup-btn {
  height: 34px;
  width: 34px;
  cursor: pointer;
  border-radius: 34px;
}
#account input[type=submit] {
  background: #91C5CD url(http://i.imgur.com/n5dzb3A.png) 0 0 no-repeat;
  -o-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
#account input[type=submit]:hover {
  background-color: #7FB3BB;
}
#account .signup-btn {
  background: #ff8488 url(http://i.imgur.com/n5dzb3A.png) 0 -39px no-repeat;
  float: left;
  margin-left: 5px;
}
#account .signup-btn:hover {
  background-color: #EC7175;
}
#userarea {
  line-height: 34px;
  color: #929ca5;
  float: right;
  letter-spacing: 1px;
  margin: 15px 15px 0 0;
  width: 500px;
  text-align: justify;
}
/*-Main Content-*/
#main-content {
  background-color: #808672;
  padding: 15px;
  overflow: hidden;
}
.pun .main-content {
  background-color: #EDEDED;
  border: none;
}
#profile-advanced-details div.separator {
  border-bottom: 1px solid #9e9e9e;
}
#profile-advanced-details dl {
  margin: 0.6em 0 0;
  padding: 0.6em 0px 0.7em 0;
  width: 98%;
}
.pun .user-ident .user-basic-info {
  margin-top: 5px;
  margin-bottom: -5px;
}
.main .main-foot, .main .main-head {
  background-color: #3F5748;
  color: #fff;
  -webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
  line-height: 38px;
  font-size: 1.12em;
  font-weight: bold;
  font-family: 'Lato', 'Arial', sans-serif;
  padding: .0em 0.5em;
}
#tabs ul li.activetab a {
  background-color: #90c4cc;
  border-color: #90c4cc;
  color: #f4f9fd;
  text-decoration: underline;
}
#tabs ul li a {
  background-color: #ededed;
  border: 1px solid #E9E9E9;
  border-bottom: none;
}
#tabs ul li.activetab a:hover {
  background-color: #89BAC2;
}
#profile-advanced-right .main-content.clearfix.center img:first-child {
  padding: 2px;
  border-radius: 10px;
  border: 1px solid #9e9e9e;
  background: #ededed;
  width: 125px;
  -o-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-in-out;
}
#profile-advanced-right .main-content.clearfix.center img:first-child:hover {
  opacity: 0.9;
}
.main-content.standalone h2 {
  border-bottom: 1px solid #9e9e9e;
}
.main-content.standalone .button {
  background-color: #90c4cc;
  border: 1px solid #90c4cc;
  color: #f4f9fd;
  margin: 1em;
  padding: .5em 1em;
}
.main-content.standalone .button:hover {
  background-color: #89BAC2;
  border: 1px solid #90c4cc;
}
.main-content.standalone .button.button1 {
  font-weight: 500;
}
/*-Footer-*/
#pun-about #qjump, #pun-about fieldset {
  display: none;
}
#pun-about {
  background-color: #ededed;
  border-color: #1a1a1a;
      width: 97.89%;
    margin-left: -0.9px;
}
#footer {
  padding: 30px 0;
  background: #3F5748;
  color: #889497;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-top:1px solid #000;
}
#footer .wrapper {
  position: relative;
}
#footer a.backtop {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background: url(http://i.imgur.com/20hmQGl.png) 0 0 no-repeat;
  height: 22px;
  width: 22px;
}
#footer a.backtop:hover {
  background-position: 0 -27px;
}
#footer a {
  color: #000;
  font-size: 13px;
  font-family: 'Lato', sans-serif;
}
#footer strong {
  color: #ADB9BC;
}
a:link, a:visited {
  color: #717F53;
  text-decoration: none;
}
.smalltext, tr.smalltext th {
  font-size: 11px;
}
/*-Categorias-*/
.pun table.table td {
  background-color: #e6e6e6 !important;
  border-color: rgba(0,0,0,0);
  border-style: none;
  border-width: 0;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
    background-color: #e6e6e6 !important;
}
.pun tbody.statused span.status {
  position: relative;
  width: 0px;
}
.icon.windowbg span img {
  margin-left: .1em;
}
.icon.windowbg {
  text-align: center;
  width: 5.9%;
}
.pun .main-content .table .statused tr {
  border-bottom: 1px solid #9e9e9e;
}
.pun tbody.statused td.tcl {
  padding-left: 40px;
}
.pun table.table td {
  line-height: 130%;
}
.pun table .tcr {
  font-size: 11px;
  text-align: justify;
background-color: #e6e6e6;
}
.pun table .tcr {
  font-size: 11px;
  overflow: hidden;
  padding: 0 .9em 0 .5em !important;
  text-align: justify;
  width: 26%;
  background-color: #e6e6e6;
}
.pun .table .tc2, .pun .table .tc3 {
  font-size: 11px;
  line-height: 140%;
  text-align: left;
  width: 15%;
  background-color: #e6e6e6;
}
.pun table.table th {
    background-color: #e6e6e6;
    border-color: #;
    border-style: none;
    color: #333;
    padding: .5em 0;
}
  .pun .frm-form {
    background: #e6e6e6;
    border: none;
}
.tc2 span {
  color: #444;
  font-size: 133%;
}
table.table_list tbody.header td {
  padding: 0;
}
table.table_list tbody.header td div.cat_bar {
  margin-bottom: -1px;
}
div.cat_bar {
  background: #3F5748;
  padding-left: 9px;
  height: 38px;
  overflow: hidden;
  margin-top: 15px;
}
 
h4.catbg, h4.catbg2, h3.catbg, h3.catbg2, .table_list tbody.header td.catbg {
  background: #3F5748;
  padding-right: 9px;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
  color: #fff;
}
.pun h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg {
  line-height: 38px;
  font-size: 20px;
  font-family: 'poiret one', sans-serif;
  text-align:center;
  text-transform:uppercase;
  letter-spacing: 5;
  text-weight: 100;
      text-shadow: 1px 1px 2px #000;
}
.pun h2.topic-title {
  line-height: 3;
  font-family: 'poiret one', san-serif;
  text-transform: uppercase;
  text-weight: 600;
  font-size: 15px;
  letter-spacing: 0.8;
}

.tcl .hierarchy .forumtitle {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #708559;
  height:20px;
  text-transform:uppercase;
}
#posting_icons {
  padding: 0 1em 0.5em 1em;
  margin: 1.5em 0 2.4em 0;
  line-height: 1em;
}
#posting_icons ul {
  font-size: 0.8em;
}
ul.reset, ul.reset li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.floatleft {
  float: left;
}
#posting_icons img {
  vertical-align: middle;
  margin: 0 0 0 4ex;
}
#posting_icons ul {
  font-size: 0.8em;
}
.pun-crumbs {
  display: block;
  margin: 10px;
  padding: 5px 10px;
  overflow: hidden;
  clear: both;
  border: 1px solid #20231E;
  border-radius: 3px;
}
.pun-crumbs .crumbs a {
  white-space: pre;
  color: #37553b;
  font-size: 12px;
}
.pun-crumbs p {
  line-height: 1.9;
  color: #fff;
}
.pun .paged-foot, .pun .paged-head {
  background-color: transparent;
  border: none;
  padding: .6em 1.3em .3em;
}
#stats {
  border: 1px solid #9e9e9e;
  border-bottom: none;
  background-color: #ededed;
}
#onlinelist {
  background-color: #ededed;
  border: 1px solid #9e9e9e;
}
/*-Stats-*/
.roundframe {
background: #E1E1E1;
border: 2px solid #eee;
border-radius: 5px;
padding: 10px;
}
#upshrinkHeaderIC {
margin-top: 4px;
}
div.title_barIC {
  background: #80A15D;
  -webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
height: 40px;
margin-bottom: 1px;
overflow: hidden;
padding-left: 9px;
}
div.title_barIC h4.titlebg {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #fff;
  font-weight: 100;
    text-shadow: 1px 1px 2px #000;
}
h4.titlebg, h3.titlebg {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-right: 9px;
}
h4.titlebg img.icon {
float: left;
margin: 8px 8px 0 0;
}
div.roundframe div.cat_bar h3.catbg {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
      text-shadow: 1px 1px 2px #000;
}
div.roundframe div.cat_bar {
  background: #80A15D;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin-bottom: 0;
}
#upshrinkHeaderIC p {
margin: 0 0 0.5em 0;
padding: 0.5em;
}
#upshrinkHeaderIC p.stats {
font-size: 1.1em;
padding-top: 8px;
}
#upshrinkHeaderIC p.inline {
border: none;
margin: 0;
}
#upshrinkHeaderIC p.last {
margin: 0;
padding: 0.5em;
border-top: 2px dotted #bbb;
}
/*-Register-*/
#username_reg, #email, #password_reg {
  font: 95%/115% 'Lato', sans-serif;
  color: #4F5961;
  background: #E1E1E1;
  border: 1px solid #7f9db9;
  padding: 5px;
  border-radius: 3px;
}
fieldset.frm-set.multi {
  border-bottom: none;
  padding: 0;
  margin-bottom: -0px;
}
.main .main-content.frm {
  background-color: #E1E1E1;
}
.frm-buttons {
  border-top: 1px solid #8e8e8e;
}
.pun .frm .frm-buttons input {
  background: #FE7B7F;
  color: #fff;
  cursor: pointer;
  font-weight: normal;
  border: none;
  font: 95%/115% 'Lato', sans-serif;
  padding: 5px;
  border-radius: 3px;
}
.pun .frm .frm-buttons input:hover {
  background: #4D5760;
}
#pun-announcement {
  background-color: transparent;
  border: 1px solid transparent;
  color: #4F5961;
  font-weight: 700;
  margin-top: -20px;
  border-radius: 2px;
  padding: 1em;
}
.main .frm-info {
  background: #ededed;
  border: 1px solid #D6EFF8;
  color: #4F5961;
  font-weight: 700;
  margin: 0.5em;
  padding: 1em;
}
/*-Chat-*/
#chatbox_members {
  border-right: 1px solid #9e9e9e;
  bottom: 37.5px;
}
#chatbox_footer {
  border-top: 1px solid #9e9e9e;
}
#chatbox_header.main-head {
  background-color: #3F5748;
  border-radius: 2px;
}
.chatbox-title, .chatbox-title a.chat-title {
  color: #FFFFFF;
  text-decoration: none;
  margin-left: -7px;
}
.chatbox-title {
  padding: 3px 5px 0;
}
.chatbox-options li:hover, .chatbox-options li a:hover, .chatbox-options li label:hover {
  color: white;
}
#chatbox_members .member-title {
  background-color: rgba(144, 196, 204, 0.5);
  border-bottom: 2px solid #90C4CC;
}
.member-title.away {
  background-color: rgba(77, 87, 96, 0.5);
  border-bottom: 2px solid #4D5760;
}
/*-Posts-*/
.pagesection {
 font-size: 0.9em;
  margin: 10px 0;
  overflow: hidden;
}
.nextlinks {
  text-align: right;
  margin-top: -1px;
}
.buttonlist.floatright ul li a {
color: #FFF;
}
.buttonlist ul {
  z-index: 100;
  padding: 0;
  margin: 0 0 5px 0;
}
.buttonlist li {
  margin: 0 0 0 2px;
  padding: 0;
  list-style: none;
  float: left;
}
.buttonlist li a {
  display: block;
  font-size: 12px;
  color: #fff;
  background: #626C75;
  height: 22px;
  line-height: 21px;
  padding: 0 8px;
  cursor: pointer;
  border-radius: 3px;
}
.buttonlist.floatright {
  float: right;
}
.align_top ul li a, .align_bottom ul li a {
  margin: 0 12px 0 0;
}
.pun .paging {
  float: left;
  font-size: .9em;
  font-weight: 300;
}
.pun .postmain {
    background-color: #ededed;
    border-left: none;
    margin-left: 14.6em;
    margin-top: 15px;
}
.pun .main .main-content p.message {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 1.7em;
    padding: 1em;
    margin-top: 0px;
}
.main .main-content.frm {
    background-color: #E1E1E1;
    margin-top: -22px;
}
.pun .post .user {
  float: left;
  margin-left: -14em;
  margin-top: -45px;
  border-right: 0px solid #1a1a1a;
}
.user-basic-info a img {
  width: 160px;
  border: 1px solid #000;
  padding: 1px;
  margin-top: -10px;
}
.pun .posthead {
  background: #E1E1E1;
  border-bottom: 1px solid #519873;
  padding: 0;
}
.pun .post-entry {
background: #ededed;
}
.pun .entry-content {
    overflow: hidden;
    padding-bottom: .8em;
    width: 95%;
    text-align: justify;
}

.postfoot {
  background-color:#ededed;
  border-top: 1px solid #1a1a1a;
  clear: both;
  margin-left: -14.6em;
}
.pun .user {
  width: 15em
}
.sig-content {
  border-top: 1px solid #519873;
}
.pun .user .user-info {
  font-size: 11px;
  width: 160px;
  text-align: justify;
  line-height: 1.4;
}
.pun .user .username {
  font-size: 16px;
  color: #434D55;
  padding-top: 10px;
}
.keyinfo {
  margin-top: 8px;
  border-bottom: 1px solid #1a1a1a;
  background-color: #ededed;
}
.messageicon {
  float: left;
  margin: 0 0.5em 0 0;
}
.messageicon img {
  padding: 6px 3px;
}
h5 {
  color: #434D55;
  font-size: 1em;
  margin: 0;
  padding: 0;
}
/**
 * FA.BEGIN Two-Column Categories
 */
 
.wrapper {
    min-width: 1185px;
}
 
.cat_bar + .main-content tbody {
    overflow: hidden;
}
 
.cat_bar + .main-content .statused > tr {
    display: block;
    width: 45%;
    margin: 2.5%;
    float: left;
    box-sizing: border-box;
    background-color: #e6e6e6;
    border: 1px #ccc solid;
    position: relative;
}
 
.cat_bar + .main-content .statused > tr > td {
    background: none !important;
    padding: 5px;
    display: block; 
    padding-right: 15px;
}
 
.cat_bar + .main-content .tc2 {
    clear: both;
    width: auto;
    text-align: right;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
}
 
.cat_bar + .main-content .tc2,
.cat_bar + .main-content .tc2 span {
    font-size: 0.7rem;
}
 
.cat_bar + .main-content .tc2 span {
    margin-right: 10px;
}
 
.cat_bar + .main-content .tc2 br {
    display: none;
}
 
.cat_bar + .main-content .statused > tr > .tcr {
    display: none;
}
 
.cat_bar + .main-content .tcl {
    box-sizing: border-box;
    height: 175px;
    display: block;
    margin-left: 70px;
    width: auto;
}
 
.cat_bar + .main-content .icon {
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -32px;
}
 
.cat_bar + .main-content .hierarchy {
    display: block;
    padding-top: 10px;
    text-align: center;
}
 
.cat_bar + .main-content .hierarchy + br {
    display: none;
}
/**
 * FA.END Two-Column Categories
 */
.module .main-head {
  text-shadow: 1px 1px 3px black;
  font-family: poiret one;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 3;
  line-height: 2;
}
.module.main {
  font-size:10px;
  font-family: verdana;
}
::-webkit-scrollbar-track
{
   border: 1px solid black;
   background-color: #F5F5F5;
}
::-webkit-scrollbar
{
   width: 10px;
   background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
   background-color: #000000;   
}
#topnav li:hover ul li:hover ul {
    left: auto;
    right: -100%;
    top: 0;
}
.tdtopics img {
    vertical-align: middle;
    padding: 5px;
}
/* Headerbox */
#headerbox {
width:100%;
padding:15px;
background: #transparent;
border:1px solid #EEE;
  margin-top: -30px;
}

#headerbox .headerin {
width:50%px;
padding:10px;
background-color:#transparent;
border:1px solid #F3F3F3;
}

h3 {
    font-size: 30px;
}
img[alt="avatar"]{
max-width:160px !important;
max-height:220px !important;
}
#fa_usermenu img {
    max-height: 120px !important;
    max-width: 120px;
}
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
        .fa_vote, .fa_voted, .fa_count {
          font-size:12px;
          font-family:Verdana, Arial, Helvetica, Sans-serif;
          display:inline-block !important;
          width:auto !important;
          float:none !important;
          transition:300ms;
        }
     
        .fa_voted, .fa_vote:hover { opacity:0.4 }
        .fa_voted { cursor:default }
     
        .fa_count {
          font-weight:bold;
          margin:0 3px;
          cursor:default;
        }
     
        .fa_positive { color:#36BB8A }
        .fa_negative { color:#BB364A }
     
        .fa_votebar, .fa_votebar_inner {
          background:#C44;
          height:3px;
        }
     
        .fa_votebar_inner {
          background:#4A0;
          transition:300ms;
        }


Overall_header

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('#fa_ticker_content').css('display','block');

            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }

            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">
   //<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {
            ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
    _gaq.push(["_trackPageview"]);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
      ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
</head>
<body>
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
    <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
    <div class="content">
    <p>
      {hitskin_preview.L_THEME_SITE_PREVIEW}
      <br />
      <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
      </p>
    </div>
  </div>
  <!-- END hitskin_preview -->
  <!-- BEGIN switch_login_popup -->
  <div id="login_popup" class="module main">
    <div id="login_popup_title" class="main-head">
      <div class="h3">{SITENAME}</div>
    </div>
    <div class="main-content">
      {LOGIN_POPUP_MSG}
      <div id="login_popup_buttons">
        <form action="{S_LOGIN_ACTION}" method="get">
          <input type="submit" class="button2" value="{L_LOGIN}" />
          <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
          <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
        </form>
      </div>
    </div>
  </div>
  <!-- END switch_login_popup -->
  <a id="top" name="top" accesskey="t"></a>
  <div class="minwidth_IE">
    <div class="layout_IE">
      <div class="container_IE">
        <div class="pun">
          <div id="header">
            <div class="wrapper">
              <a id="logo" href="/forum"></a>
              <p id="describ">DETTE ER ET DANSK ROLLESPILS FORUM<br>this is a danish roleplay forum</p>
              <div id="search">
                <form method="get" action="/search">
                  <input class="search_input" type="text" name="search_keywords" value="Search..." onfocus="this.value = '';" onclick="if (this.value == 'search...') this.value = '';" onblur="if (this.value == '') this.value = 'Search...';"/>
                  <input class="search_button" type="submit" value="" name="submit" onclick="document.searchform.google.value='';" />
                </form>
              </div>
            </div>
          </div>
          <div id="navbar">
            <div class="wrapper">
              <ul id="topnav">
                <li id="button_home"><a class="active firstlevel" href="/forum"><span class="last firstlevel">Home</span></a></li>
                <li id="button_demo"><a class="firstlevel" href="/#"><span class="firstlevel">Members</span></a>
                  <ul>
                    <li><a href="/memberlist"><span>Bruger liste</span></a></li>
                    <li><a href="/viewonline"><span>Online liste</span></a></li>
                  <li><a href="/search?search_id=newposts"><span>Nyeste indlæg</span></a></li>
                  </ul>
                </li>
                    <li id="button_groups"><a class="firstlevel" href="/groups"><span class="firstlevel">Join Race</span></a></li>
                <li id="button_help"><a class="firstlevel" href="/faq"><span class="firstlevel">Help</span></a></li>
                <li id="button_search"><a class="firstlevel" href="/search"><span class="firstlevel">Search</span></a></li>
                <li id="button_calendar"><a class="firstlevel" href="/calendar"><span class="firstlevel">Calendar</span></a></li>
                <!-- BEGIN switch_user_logged_in -->
                <li id="button_profile"><a class="firstlevel" href="/profile?mode=editprofile&page_profil=informations"><span class="firstlevel">Profile</span></a></li>
                <li id="button_logout"><a class="firstlevel" href="/login?logout"><span class="firstlevel">Logout</span></a></li>
                <!-- END switch_user_logged_in -->
                <!-- BEGIN switch_user_logged_out -->
                <li id="button_login"><a class="firstlevel" href="/login"><span class="firstlevel">Login</span></a></li>
                <li id="button_register"><a class="firstlevel" href="/register"><span class="last firstlevel">Register</span></a></li></ul>
                            <!-- END switch_user_logged_out -->
            </div>
          <div class="wrapper">
            <div id="board-notice"></div>
            <div id="content-wrapper">
              <div id="toolbar">
                  <!-- BEGIN switch_user_logged_in -->
                  <div id="userarea">Hello <strong><span class="USERNAME" style="color:white;text-transform: uppercase;"></span></strong> |
                    <a class="" href="{U_PRIVATEMSGS}" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()" title="Mensajeria">Private Message</a> |
                    <a href="/login?logout=1">Logout</a>
                </div>
                  <!-- END switch_user_logged_in -->
                  <!-- BEGIN switch_user_logged_out -->
                <div id="account">
                  <form id="guest_form" action="/login?redirect=/" method="post" accept-charset="ISO-8859-1"  onsubmit="hashLoginPassword(this, '1392d44e37993d887de1314c0fabf8c6');">
                    <input type="text" name="username" class="login_input" onfocus="if(this.value=='Username')value='';" onblur="if(this.value=='')value='Username';" value="Username" />
                    <input type="password" name="password" class="login_input"  name="passwrd" onfocus="if(this.value=='Password')value='';" onblur="if(this.value=='')value='Password';" value="Password" />
                    <input type="submit" value="" name="login"class="login_button" title="Login" />
                    <a class="signup-btn" href="/register" title="Register"></a>
                    <input type="hidden" name="hash_passwrd" value="" />
                  </form>
                </div>
                  <!-- END switch_user_logged_out -->
              </div>
              <div id="main-content">
          <!-- BEGIN switch_ticker_new -->
          <div id="fa_ticker_block" style="padding-top:4px;">
            <div class="module main">
              <div class="main-content clearfix">
                <div id="fa_ticker_container">
                  <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                    <!-- BEGIN ticker_row -->
                    <li>{switch_ticker.ticker_row.ELEMENT}</li>
                    <!-- END ticker_row -->
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- END switch_ticker_new -->
          <!-- BEGIN switch_ticker -->
          <div id="fa_ticker_block" style="padding-top:4px;">
            <div class="module main">
              <div class="main-content clearfix">
                <div id="fa_ticker_container">
                  <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                    <div class="fa_ticker_content">
                      <!-- BEGIN ticker_row -->
                      <div>{switch_ticker.ticker_row.ELEMENT}</div>
                      <!-- END ticker_row -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- END switch_ticker -->
          <div id="page-body">
            <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
              <div id="outer-wrapper">
                <div id="wrapper">
                  <div id="container">
                    <div id="content">
                      <div id="{ID_LEFT}">
                        <!-- BEGIN giefmod_index1 -->
                        {giefmod_index1.MODVAR}
                        <!-- BEGIN saut -->
                        <div style="height:{SPACE_ROW}px"></div>
                        <!-- END saut -->
                        <!-- END giefmod_index1 -->
                      </div>
                      <div id="main">
                        <!-- BEGIN html_validation -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
<!-- END html_validation -->

Edit: i removed the javascript that made the menu scroll when passing a certain amount of pixels which seems to have done the trick of the scroll to the top of the page.. dkn why

Bump