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

Ev1dentFir3

Active Member
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

Pixel Exit Staff
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

Active Member
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

Active Member
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

Pixel Exit Staff
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.
 

Russ

Pixel Exit Staff
Try something like this is extra.css:

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

Ev1dentFir3

Active Member
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

Pixel Exit Staff
I think... on your version it's controlled:

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

Ev1dentFir3

Active Member
@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.

#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="[email protected]_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

Active Member
@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 .
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.