How to: Side Navigation Bar! (Left)
I basically just gutted the code out of my profile and made it look like the actual SpaceHey navigation bar, because if I didn't do that it would have looked really broken. the gifs i had on the side of the links are still there but different and nearly invisible. I made a note within the code to let people know they can change the gif links with different ones, (hopefully that makes sense). On mobile, it just looks like the basic Spacehey profile, so no need to worry about it looking broken on mobile! Oh and btw, the original code from my profile isn't mine, but a heavily edited version of clear's (goes by /kento on my profile credits) popular layout "witches notes"
How it looks (with no customization)
This ONLY changes the navigation bar, nothing else
Just Insert the code below within the black text box into your about me page, then you'll have the SpaceHey navigation bar on the left side of your screen! You can change the gifs, and colors however you want, since this can be used as a base.
<style>
nav .top .right button, [type="button"], [type="reset"], [type="submit"]{
border:none;
}
.logout-btn, .logout-form{
border:none;
}
.logout-btn, .logout-form:hover{
border:none;
}
.count{
color:#008b8b;
}
.icon, .award img{
visibility:hidden;
}
main .left, main .right {
padding:18px;
}
nav .links .icon{
margin-right:-30px;
}
nav .links .icon img{
visibility: hidden;
}
nav .links img.icon {
visibility: hidden;
}
nav .links li:nth-child(odd)::before{
/*change the links with tiny gifs links! they look great if you do, I recommend 'lostsozai.tumblr.com'*/
content:url('https://64.media.tumblr.com/8074461f78ad30a6027ed671f310a416/70799a5b0d7934b1-28/s75x75_c1/ccc5bd472debf512a50fcea20652740fc63a76a8.gifv');
margin-right:20px;
}
nav .links li:nth-child(even)::before{
content:url('https://64.media.tumblr.com/8074461f78ad30a6027ed671f310a416/70799a5b0d7934b1-28/s75x75_c1/ccc5bd472debf512a50fcea20652740fc63a76a8.gifv');
margin-right:20px;
}
nav .links a{
text-transform:lowercase;
color:white;
text-align:center;
}
nav .links a:hover{
color:White;
}
nav .links {
border-top: 1px white;
position:absolute;
margin-left: 15px;
padding-top:20px;
padding-bottom:20px;
border-bottom: 1px white;
font-size:15px;
margin-top:140px;
width:180px;
background:DodgerBlue;
}
nav .center{
position:absolute;
top:0px;
width:200px;
padding:10px;
margin-top:80px;
background:DodgerBlue;
}
nav .top .left{
top:0px;
width:200px;
padding:10px;
position:absolute;
background:;
}
nav .top .left .logo{
content:url('');
}
main{
background:;
}
nav .top .right {
text-align:center;
}
nav .right{
position:absolute;
margin-top:50px;
text-align:center;
float:none;
width:200px;
background:;
}
nav .top{
background:DodgerBlue;
width:100%;
}
nav{
height:100%;
position:fixed;
left:0px;
width:210px;
background:DodgerBlue;
color:;
}
.container{
background:none;
}
</style>
No need to give cred!
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
MAKO ♪
WOWIE THIS IS AWESOMEE!!!!!
Report Comment
thanks!
by Koda; ; Report