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.


b5ef29a6caa7f3f50bdb0b5ce4f63496.png


Thanks,
Ev1
 

Steve

Moderator
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

45e3b359778dc8a458349755f08a76c8.jpg
 

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.
 

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;
}

6b341d03a9884cf30f1cff13ddd33fe6.jpg
 

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.