Custom Top bar that follows the screen

[Rukiri]

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">
<ul>
<span class="site_logo_sm">
<a href="link back forum index"><img src="link to my logo"></a>
</span>
<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.
<ul>
// Manage account
// Change avatar
// Change Signature
// Total posts
// Total trophies
</li>
<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>
<li class="nav current">
                <a href="/mailbox/notices/" class="main"><img src="// notice icon" class="icon">Notices</a>
            </li>
// 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="this.select()" name="query"><button type="submit"><img src="// search icon" class="icon"></button>
                </form>
            </li>
// basically the search form is moved to the topbar and is positioned on the far right of the bar.
</ul>
</div>

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]

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]

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.