Custom Top bar that follows the screen


I'm currently working on a top bar that will basically get rid of the user information on the main navigation area and will just leave that area for my sites navigation.

Now here's what I currently have, haven't started the CSS yet but just setting up the html IDs.

<div id="top_bar">
<span class="site_logo_sm">
<a href="link back forum index"><img src="link to my logo"></a>
<li class="nav" id="account_menu">
                <div class="menu" style="display: none;"><div id="avatar"><img src="user avatar path"></div> //should the users avatar but as a small icon.
// Manage account
// Change avatar
// Change Signature
// Total posts
// Total trophies
<li class="nav">
                <div class="menu" style="display: none;"><ul>
                    <li><a href="/mailbox/compose/"><img src="// mailbox new icon" class="icon">Compose</a></li>
                    <li><a href="/mailbox/sent/"><img src="// mail sent icon" class="icon">Sent</a></li>
                </ul></div><a href="/mailbox/" class="main"><img src="// mailbox icon" class="icon">Mailbox</a>
<li class="nav current">
                <a href="/mailbox/notices/" class="main"><img src="// notice icon" class="icon">Notices</a>
// the above is basically the same as the "alerts" on the current navigation, functions exactly the same except it's on the topbar instead of the navigation.
<li id="search">
                <form method="get" action="/search/" name="search">
                    <input type="text" onfocus="" name="query"><button type="submit"><img src="// search icon" class="icon"></button>
// basically the search form is moved to the topbar and is positioned on the far right of the bar.
The CSS I've written for the "top_bar" div id.
#top_bar {
    background-color: #000;
    font-family: "Arial",sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
    height: 27px;
    left: 0;
    padding-bottom: 6px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 5;
Other than editing the navigation and navigation.css templates I'm a bit lost on how to actually do this, I've seen it done in another skin but of course I forgot exactly which skin it was done.

Or should this be a completely custom template? This would actually be a great addition to xenforo even for the default, when I get this done I'll definitely release it!

If you need mockup images I'll definitely post them.

All help is welcomed.

Jake Bunce

XenForo moderator
Staff member
You appear to have all of the code for this. You just need to add it to the templates. I recommend using the EXTRA.css template for the CSS. The HTML can go into PAGE_CONTAINER somewhere inside of the body. I think that answers your question.

Ryan Kent

Well-known member
One small suggestion I would offer...

Create a new template for your code. Decide upon a naming convention so you can easily identify all your custom templates such as Rukiri_Navigation.

Then in the PAGE_CONTAINER you would simply add a single xen include line.