• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 CSS Header Styling Help

I'm trying to get the a few pieces of text to far right of the header where it says TEXT here but instead its displaying over the logo. I had this working before but I was on 1.2.5 with text on the left, logo in the the middle and text to the right but my database got corrupt and so i lost the code. I've been trying to recreate it for my current needs and cant get it working.

Any help would very much be appreciated.

Website URL: http://mcbuffalo.com

Please see below photo:

CSS (Extra.css):
#logo .serverlink a {
        color: #FFF;
        font-weight: bold
    #logo .serverlink {
        width: 100%;
        padding: 0px;
        margin: 0px;
        position: absolute;
        bottom: 4px;
        z-index: 2;
        line-height: 2em;
        font-weight: bold;
        color: #FFF;
        display: block;
        vertical-align: text-bottom;
        outline: 0 none;
        text-transform: uppercase;
        font-size: 1.1em;
        font-weight: bold;
        color: #FFF;
        text-align: center;
        text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5),0px -1px 5px rgba(0, 0, 0, 0.5),-1px 0px 5px rgba(0, 0, 0, 0.5),-1px -1px 5px rgba(0, 0, 0, 0.5);
        filter: dropshadow(color=#000000,offx=0,offy=0);
    #logo .serverlink.left { float: left; left: 0px; width: 40%; text-align: left; padding-left: 5px; }
    #logo .serverlink.right { float: right; right: 0px; width: 40%;  text-align: right; padding-right: 5px; }
Logo Block code:
        <xen:hook name="header_logo">

        <div id="logo"><a href="{$logoLink}">
            <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
            <xen:if is="@uix_logoText"><h2 class="uix_textLogo"><xen:if is="@uix_logoTextIcon"><i class="uix_icon @uix_logoTextIcon"></i></xen:if>@uix_logoText</h2><xen:else /><img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" /></xen:if>
            <xen:if is="@uix_sloganText"><div class="uix_slogan">@uix_sloganText</div></xen:if>

<h2 class="serverlink left">
<h2 class="serverlink right">
    <a href="ts3server://ts.mcbuffalo.com">TeamSpeak: ts.mcbuffalo.com</a>
    Server IP: play.mcbuffalo.com
Last edited:


XenForo moderator
Staff member
The code is inside the logo div so it is constrained by the width of the logo.

Move it outside the div.