Custom Navigation Bar

Custom Navigation Bar


This is a guide on how to create a custom side navigation bar for the post-reforge. The links will work for people signed into your campaign and for visitors.

Setting It Up:

First thing we need to do is destroy and rearrange the original navigation menu so that we can build it up stronger than before.


.campaign-public-layout #campaign-nav {
top:31.5px; background-color:transparent;}

.icon{display:none !important;}


.campaign-public-layout #campaign-nav selects the main container for your nav links.

“top:31.5px” moves the links down in relation to the sidebar. The Tyellador sidebar has a border on the top, so the links need to be moved down.

“background-color:transparent” makes the background transparent, so you don’t have to see it! This is a good thing.

.icon{display:none !important;} makes the Obsidian Portal icons disappear. You don’t want to see this for your beautiful customized nav bar, so go and hide them!

The Background:

Now we get to make our navigation bar actually start to look good!


.collapsable-nav-row .front-nav-container {
width:100%;
background-image:url(YOUR IMAGE HERE);
background-repeat:no-repeat;
top:-10px;
left:15px;
width:191px;
height:423px;}


The most important part here is obviously your background image. “background-repeat:no-repeat” makes sure that you only see your background once. Otherwise, there is a possibility it tiles. The rest of what you see is positioning to get everything to look right, feel free to change these values as you see fit. It takes experimentation.

Making the Links Right:

So, now you have your beautiful background, and then very bold links. You have two options here. Option A: Give your links a fancy font and call it a day. Option B: Make your links images, and make it really awesome!

Option A:


#campaign-nav .nav-text{font-family:YOUR FONT HERE;}


And that’s all it takes! Choose your font. You can also move this around If you want to move your text around, you can do something like this:

#campaign-nav .nav-text{font-family:YOUR FONT HERE; position:relative; left:50px;}

Move it however left or right you need, or offset it from the top. You can also change font-size, style, etc.

Option B:

This is where it gets fun! …but also, LOTS of code. So, here we go!


#campaign-nav .nav-text {font-size:0;}

#campaign-nav .dashboard {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .front-page {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .forum {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .calendar {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .adventure-log {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .wiki {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .characters {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .items {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .maps {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}
#campaign-nav .settings {background-image:url(‘//LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;}


So, what’s going on here?

#campaign-nav .nav-text {font-size:0;} makes the text of the link disappear. This is what we changed around in Option A. We’re using images now, so we don’t want this text.

#campaign-nav .settings {background-image:url(‘LINK IMAGE HERE’); background-repeat:no-repeat;background-position:center;} This is where you upload your image for each individual link. I recommend uploading them so that they have transparent backgrounds. The “background-position:center” centers the image within your sidebar. You can make this left or right as well.

And that’s it! Congratulations, you have a custom nav bar of your own devising!

Back to Tutorials

Custom Navigation Bar

Tyellador Thorvaldr Thorvaldr