Moving visitor_tab to header


Well-known member
The main menu is prime real estate and with many great addons being created for XF it has become more and more apparent to me that many may need to move the Visitor Tabs of Username, Inbox, Alerts and Log Out off the main menu. There is a how to guide of achieving this putting them into the Moderator bar but to the normal user this also takes up extra vertical space. Also, to me a user should login and logout from the same spot on my site.

Thanks to Forsaken for guidance in his thread on how to move them to the Moderator Bar HERE
To move just the Logout and make it the same as the Login, follow the steps HERE

So the following is how I moved them all to the header making them look the same as the Login/Register tab. I am putting it here as I believe that it may not be perfect and one of the great CSS/Developers here may be able to offer assistance in improving it further...hope it helps someone.

This is what it looks like on my site:

Step 1: navigation_visitor_tab template
Right after:
<xen:edithint template="navigation.css" />
<div class="navTabs">
AND at the very end of the template also add:
Next, find 2 instances of:
<span class="arrow"></span>

Also in the navigation_visitor_tab template, find this block of code and remove it BUT save it in a text editor like Notepad as the same code will need to be placed in the navigation template (see Step 2)
    <xen:if is="{$tabs.account.selected}">
    <li class="navTab selected PopupClosed">
        <div class="tabLinks">
            <div class="primaryContent menuHeader">
                <div class="muted">{xen:phrase quick_links}</div>
            <ul class="secondaryContent blockLinksList">
            <xen:hook name="navigation_tabs_account">
                <li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li>
                <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
                <li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li>
                <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
Step 2: navigation template
Find this code:
        <!-- no selection -->
        <xen:if is="!{$selectedTab}">
            <li class="navTab selected"><div class="tabLinks"></div></li>
AND insert the code you removed in Step 1 right after it

Next, find this code:
    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>

Step 3: header template
Right after:
<xen:hook name="header">
    <div id="header">
        <xen:if is="{$visitor.user_id}">
            <div class="pageWidth">
                <span class="user_menu">
                    <xen:include template="navigation_visitor_tab" />
Step 4: EXTRA.css template
Add the following css styling code:
    background-color: @primaryDarker;
    padding: 0 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0px 2px 5px @primaryDarker;
Step 5: Finally, the red alert balloons need to be moved down inline with the Inbox and Alerts links. To do this open Style Properties -> Header and Navigation -> Alert Balloon and in the css box:
Remove position: absolute; and add display: inline-block;
Remove right: 2px;
Remove top: -12px;

Next, change the Text Size in the properties from 9px to 11px to make the number in the red box stand out more

That is it

If you use a style which adds a few pixels to the top of a menu tab, like I do as shown in the image above with the "Forums" tab highlighted, then you will need to perform these extra steps to make the Username menu tab hover the same size as the tab. To do this...
Step 1:
Add the following css style code to the EXTRA.css template:
    color: @primaryDark !important;
    background: @primaryLight url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
    border-radius: 3px;
.account_selected a
    color: @primaryDark !important;
    text-shadow: 1px 1px 2px white;
Step 2:
In the navigation_visitor_tab template find:
{xen:if $tabs.account.selected, 'selected'}
AND replace it with:
{xen:if $tabs.account.selected, 'account_selected'}
Hope someone else finds this useful and please, if there is a better, more efficient way of doing this, I would be grateful if you could let me know


Well-known member
looks great, especially as we also have the "Log in or Sign up" button in the same area.........

.... and it can also be made better visible to the user if you change the colors a bit. So the colors for the "Account/Inbox/Alerts" are not bound to the color-scheme of the Navbar.

top idea (y)
I even think this would make much sense to have in XF as per default..... :) especially when you have a fixed-width-style you need more space in the Navbar for the Resources-Tabs and some other custom Tabs you might want to have.



Well-known member
I was going to Brogan but my css knowledge is amateurish at best so rather than make a formal Resource out of it I was hoping more "guru" users could improve it first and then put it in as a Resource...I don't even know yet if it is W3 standard or whether it is the most efficient or any other standards to comply with.


XenForo moderator
Staff member
Don't worry about it Ian, the RM is there for everyone to use.

If you posted it I'm sure the other members would comment and make suggestions if required.


Well-known member
Oops, I forgot one little step...I found on my site that I ended up with little red marks next the number of PC and Alerts:

To get rid of them, in your navigation_visitor_tab template find 2 instances of:
<span class="arrow"></span>

I will update the opening post with this step


Well-known member
yeah, would be better to have this code listed in the RM so that this idea gets more attention and does not get lost in the convolute of threads.

Would be nice to have the "red nose" of the "Alert-balloon" pointing to the left....



Well-known member
Another oops...just found one setting that I missed mentioning when I created this. The red alert balloons need to be moved down inline with the Inbox and Alerts links. To do this open Style Properties -> Header and Navigation -> Alert Balloon and in the css box change:
position: absolute; TO display: inline-block;
Remove the right: 2px;
Remove the top: -12px;

Whilst you are there change the Text Size from 9px to 11px to make the number in the red box stand out more

I will update the opening post with this


Active member
Hey there, I have tried on my template "Cacbon from *******" but the tabs are unusable so nothing happens when I put the mouse on the new bar...
What's wrong?