Anchoring the Header Logo at the bottom so it extends past the top of the nav bar.

[Ev1dentFir3]

Hello I am wanting to take make a new logo design that extends past the top of my nav bar, but it seems to be anchored at the top of the nav bar, I want to make it anchor at the bottom if possible. I didn't find any settings for this in.

See picture below.

Thanks,
Ev1

 

[Steve]

Sorry for the late response, we missed this.

Not exactly sure what you are trying to do. You want a larger logo? Or want it to appear on top of the navigation?

 

[Ev1dentFir3]

As you can see the header logo is anchored at the top left, so it pushes everything down. I want to anchor it to the bottom left so it pushes the entire mav bar down and the top of the flame extends up over the top of the nav bar.

Thanks

 

[Ev1dentFir3]

Here is a Photoshop'd version of what I am hoping to achieve. But I would like the flame to push up the admin bar, increasing the space between the admin bar and the top of the nav bar, automatically if possible based on the image used, because my site uses different styles based on the forums the user is in. Thanks

 

[Russ]

I'd need to see the logo live on the style to give the CSS, once it's up there or if you have a link to that logo I can change it on my browser itself and provide a CSS fix.

 

[Ev1dentFir3]

Here you go http://i.imgur.com/bRbQDcP.png

 

[Russ]

Try something like this is extra.css:

.xbnavLogo {
  position: relative;
  top: -83px;
}

 

[Ev1dentFir3]

It's very close, I guess I need to increase the space between the nav and admin bar so the flame isn't cut off, and it will be good

 

[Russ]

I think... on your version it's controlled:

Style Properties -> [XB] Header and Navigation -> Header Height Variable, try increasing that value.

 

[Ev1dentFir3]

@Russ after playing with the CSS in Chrome, I found how to change it. The below code is from the public.css file.

Basically I noticed that the #headerMover variable, so I played with it and found 80pxl to work well, so I had to set it to add 40pxl to the dynamically figured number.

Spoiler: public.css #headerMover (changes I made are in bold)

#headerMover
{
position: relative;
zoom: 1;
}

#headerMover #headerProxy
{
@property "header.background";

@property "/header.background";
<xen:if is="@xb_nav_disablesub AND @xb_logoinnav">
height: {xen:calc '@xb_headerVariable + @headerTabHeight'}px;
<xen:elseif is="!@xb_nav_disablesub AND @xb_logoinnav" />
height: {xen:calc '@xb_headerVariable + @headerTabHeight + @xbsubnavTabHeight'}px;
<xen:elseif is="@xb_nav_disablesub" />
height: {xen:calc '@xb_headerVariable + @headerLogoHeight + @headerTabHeight'}px; /* +2 borders */
<xen:else />
height: {xen:calc '@xb_headerVariable + @headerLogoHeight + @headerTabHeight + @xbsubnavTabHeight'}px; /* +2 borders */
</xen:if>
}

#headerMover #header
{
width: 100%;
position: absolute;
top: 40px;
left: 0px;
}

 

[Ev1dentFir3]

@Russ ok so after navigating it for a bit, I notice that the before changes that I mentioned are NOT a fix really, it does move the header down and makes the logo line up, but everything below the header just stays there and doesn't get pushed down with it (You can kind of see it in the above photo if you like at the first title of the side bar, should be down lower). So it's better but not a perfect solution .