Since almost every Soundclick User doesn’t really like the original Navigation and tries to hide or customize it, we decided to give away some free CSS Code.
This Code will bring the Navigation to the top of the Page but is first hiding the Soundclick Logo and Links.
When you move the mouse over the Navigation it slides down. The Colors and Texts are edited and some animation Codes are added to make it look better.
Over all this Navigation is now smart and clean! Feel free to copy/paste the Code to your CSS (Advanced) area in the BandAdmin.

/*** Sliding Soundclick Navigation v4 Compact created by xlay.vision ***/
/* SSN4C START */
.completeNavHeader {
position: fixed !important;
background: #000 !important;
top: -47px !important;
left: 0px !important;
width: 100% !important;
height: 76px !important;
margin: 0px !important;
z-index: 999 !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.completeNavHeader:hover {
top: 0px !important;
}
.navbar {
background-color: #000 !important;
}
.navbarTop {
background: url('/images/siteNav/transBGBlocks/black/bg_80.png') repeat scroll 0% 0% transparent !important;
background-size: 0px !important;
border-top: none !important;
height: 47px !important;
}
.navbarTop .image {
}
.navBreadcrumbs {
color: #000000 !important;
font-size: 10px !important;
text-transform: uppercase !important;
}
.navBreadcrumbs a:link, .navBreadcrumbs a:visited {
text-transform: uppercase !important;
color: #cccccc !important;
font-size: 10px !important;
text-decoration: none !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.navBreadcrumbs a:hover {
color: #ffffff !important;
text-decoration: none !important;
}
input.navSearch_submit {
font-size: 10px !important;
background: none !important;
color: #ccc !important;
border: none !important;
text-transform: uppercase !important;
margin-top: 1px !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
input.navSearch_submit:hover {
color: #fff !important;
cursor: pointer !important;
}
input.navSearch {
margin-top: 1px !important;
font-size: 10px !important;
background: #CCC !important;
color: #000 !important;
border: none !important;
}
input.navSearch_off {
margin-top: 1px!important;
font-size: 10px !important;
font-family: Verdana,Arial;
background: #ccc !important;
color: #ccc !important;
border: none !important;
}
.subnavBox {
position: absolute;
top: 45px;
background: #000 !important;
border: none !important;
padding: 5px;
width: 170px;
z-index: 2;
text-align: left;
font-size: 10px !important;
color: #ccc !important;
}
.subnavBox a:link, .subnavBox a:visited {
color: #ccc !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.subnavBox a:hover {
color: #fff !important;
background: none !important;
}
.subnavBox .divider {
border-bottom: none !important;
}
.navbarTop .text {
font-size: 10px !important;
float: right !important;
margin-top: 37px !important;
text-transform: uppercase !important;
}
.navbarTop .text a:link, .navbarTop .text a:visited {
color: #cccccc !important;
font-size: 10px !important;
text-decoration: none !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.navbarTop .text a:hover {
color: #ffffff !important;
text-decoration: none !important;
background: none !important;
}
.arrowText a:link, .arrowText a:visited {
display: none !important;
}
.arrowText a:hover {
background: none !important;
}
.navbarTop .image a:hover {
background: none !important;
}
.navbarTop .dividerH {
border-right: none !important;
}
/* SSN4C END */