Koda's profile picture

Published by

published
updated

Category: Web, HTML, Tech

💻|How to: Side Navigation Bar! (Left)

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)

Profile

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!


 

KUDO this post please! Dont Forget to comment!

My Links! >>

My Blog Entries >>

My Profile >>


12 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

MAKO ♪

MAKO ♪'s profile picture

WOWIE THIS IS AWESOMEE!!!!!


Report Comment



thanks!

by Koda; ; Report