Toekan - extra top-bar

by PhilQ

HTML

<!-- MAIN -->
    <div id="body">
            <section>
        <h1 class="center">Evenementen</h1>
       
        <div class="col1_1 left">

            <div class="box_blue left col1_1">

                <div class="left col1_3 m_col1_2 s_col1_1 xs_col1_1 padding_10">
                    <a class="button small xs_col1_1 center" href="http://local.toekantickets/mijn-account/evenementen/nieuw" title="Nieuw evenement"><i class="fa fa-plus"></i> Nieuw evenement</a>
                </div>

                <div class="left col1_3 m_col1_2 s_col1_1 xs_col1_1 center padding_10 vpadding_20 min_height_60">
                                            Evenement 1 t/m 1 van 1
                                    </div>

                <div class="left col1_9 m_col1_2 s_col1_2 xs_col1_1 padding_10">
                    <select class="small" title="Weergeven per" onchange="self.location='http://local.toekantickets/mijn-account/evenementen/pagina-1/datum-oplopend/'+$(this).val()+'';">
                        <option value="per-15" selected=&quot;selected&quot;>Per 15</option>
                        <option value="per-20">Per 20</option>
                        <option value="per-50">Per 50</option>
                        <option value="per-100">Per 100</option>
                    </select>
                </div>

                <div class="left col2_9 m_col1_2 s_col1_2 xs_col1_1 padding_10">
                    <select class="small" title="Sorteren op" onchange="self.location='http://local.toekantickets/mijn-account/evenementen/pagina-1/'+$(this).val()+'/per-15';">
                        <option value="datum-oplopend" selected=&quot;selected&quot;>Datum (oud eerst)</option>
                        <option value="datum-aflopend">Datum (nieuw eerst)</option>
                        <option value="naam-oplopend">Naam (a-z)</option>
                        <option value="naam-aflopend">Naam (z-a)</option>
                    </select>
                </div>

           ...

SCSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);
body,hr,html,section{width:100%}#loader,#page_message{position:fixed;top:50%;left:50%}#logo,#menu-toggle,#page_message>a,#top-menu>ul>li>a,a{text-decoration:none}@font-face{font-family:wellfleet;src:url(../fonts/wellfleet-regular.eot);src:url(../fonts/wellfleet-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/wellfleet-regular.woff2) format('woff2'),url(../fonts/wellfleet-regular.woff) format('woff'),url(../fonts/wellfleet-regular.ttf) format('truetype'),url(../fonts/wellfleet-regular.svg#wellfleetregular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/montserrat-thin.eot);src:url(../fonts/montserrat-thin.eot?#iefix) format('embedded-opentype'),url(../fonts/montserrat-thin.woff2) format('woff2'),url(../fonts/montserrat-thin.woff) format('woff'),url(../fonts/montserrat-thin.ttf) format('truetype'),url(../fonts/montserrat-thin.svg#montserratthin) format('svg');font-weight:100;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/montserrat-light.eot);src:url(../fonts/montserrat-light.eot?#iefix) format('embedded-opentype'),url(../fonts/montserrat-light.woff2) format('woff2'),url(../fonts/montserrat-light.woff) format('woff'),url(../fonts/montserrat-light.ttf) format('truetype'),url(../fonts/montserrat-light.svg#montserratlight) format('svg');font-weight:200;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/montserrat-regular.eot);src:url(../fonts/montserrat-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/montserrat-regular.woff2) format('woff2'),url(../fonts/montserrat-regular.woff) format('woff'),url(../fonts/montserrat-regular.ttf) format('truetype'),url(../fonts/montserrat-regular.svg#montserratregular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/montserrat-bold.eot);src:url(../fonts/montserrat-bold.eot?#iefix)...

JavaScript

function validate_email(a){var b=/^[^\s@]+@[^\s@]+\.[^\s@]+$/i;return b.test(a)}function openMenu(){$("#menu, #menu-toggle").addClass("open"),$("body").addClass("no-scroll"),$("#overlay").addClass("show").on("click.close-menu",function(){closeMenu()}),$(document).on("keyup.close-menu",function(a){27===a.keyCode&&closeMenu()})}function closeMenu(){$("#menu, #menu-toggle").removeClass("open"),$("body").removeClass("no-scroll"),$("#overlay").removeClass("show").off("click.close-menu"),$(document).off("keyup.close-menu")}Date.now||(Date.now=function(){return(new Date).getTime()})

var page_messages=[],page_messages_on=!1,page_messages_check_and_display=function(){if(0<page_messages.length){var a=page_messages[0];if(2>a.length&&(a[1]=""),3>a.length)switch(a[1]){case"ok":a[2]="Gelukt";break;case"warning":a[2]="Waarschuwing";break;case"error":a[2]="Foutmelding";break;default:a[2]=""}page_messages.shift(),$("#page_message").removeClass().addClass(a[1]).find("> .title").html(a[2]).end().find("> .content").html(a[0]).end().css("height",function(a,b){var c=parseInt(80+parseInt($("#page_message > .content").height()));return c=c%2>0?c+1:c,c=Math.max(100,c),c+"px"}).on("close",function(a){$(this).removeClass("show").off("close"),$(this).find("> a").add("#overlay").off("click.close-message"),$(document).off("keyup.close-message"),setTimeout(function(){page_messages_check_and_display()},400)}).find("> a").add("#overlay").on("click.close-message",function(a){a.preventDefault(),a.stopImmediatePropagation(),$("#page_message").trigger("close")}).end().end().add("#overlay").addClass("show"),$(document).on("keyup.close-message",function(a){27===a.keyCode&&$("#page_message").trigger("close")}),page_messages_on=!0}else $("#overlay").removeClass("show"),page_messages_on=!1};$(document).ready(function(){


$("#subheader li.select > a").on("mouseover focus", function( e ){
	$( this ).parent().addClass("over");
}).on("mouseout blur", function(e){
	$( this...