XF 2.0 Need Help getting logo in header to align...

[vicos]

I am trying to figure out to get the flag in the attached screen captures to be tight against the left/top/bottom, e.g. there should be no margin/gap between the flag and the edge of the page.

I tried adding:

float: left;
clear: right;
margin: 0;
padding: 0;

to the extra CSS for Header/logo row swettings.



Left is how it looks in Brave and right is MS Edge. Below is how it should look:



I'm also trying to get that 2px thick black line in there. In the rest of my site I use <div class="black-divider"></div>

.black-divider {background-color: black; height: 2px;}

But, I'm not sure of this is going to mess up the Xenforo header collapsing if I add that <div></div> in there.

Appreciate any assistance

 

[Brad Padgett]

A little absolute positioning should do the trick.

Try this:

position: absolute;
top: 0;
left: 0;
bottom: 0;

As far as the black line you could try a bottom border in the header.

.p-header  {
border-bottom: 2px solid black;
}

If it doesn't work add an !important flag to overwrite the current style set you just add it right before the semicolon like this:

border-bottom: 2px solid black !important;

Not sure if it needs it but I don't really keep up with what does and what doesn't need it so I try to inform whoever I can to keep that in mind. Hope that helped.

 

[vicos]

That didn't quite do it:



I ended up modding the template app_header.less and set the margin and padding to 0 for .p-header-content and .p-header-inner

Adding border-bottom: 2px solid xf-intensify(@xf-paletteColor5, 15%); to the css for the Header/logo row solved the line.

 

[Brad Padgett]

That didn't quite do it:

View attachment 193409

I ended up modding the template app_header.less and set the margin and padding to 0 for .p-header-content and .p-header-inner

Adding border-bottom: 2px solid xf-intensify(@xf-paletteColor5, 15%); to the css for the Header/logo row solved the line.

You don't need to do any of that. You need to add it to the template extra.less where all the css changes are supposed to go. I guarantee you it will work then.

I wasn't paying attention to what selector you were modifying as the first post did not say. It should be like this.

.p-header-logo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}

I had assumed you had the correct selector. Try that and add it to extra.less

 

[Brad Padgett]

Just updated my post. It's p-header-logo you need to add it to. Not p-logo my bad. I assume the positioning on the ones you had mention would give that effect as it's for the actual header and not the logo

 

[vicos]

Roger that. I'll make the changes and let you know

I really prefer not to mod templates if I don't have to. So, thanks for that insight.

 

[Brad Padgett]

Roger that. I'll make the changes and let you know

I really prefer not to mod templates if I don't have to. So, thanks for that insight.

Yeah you might as well move any css edits you've made already to extra.less

I'm a long time XF user even back to XF 1 and that's where it's always gone (extra.css for XF1). Should be empty but will apply any code after saving.

Let me know if you require further assistance

 

[vicos]

Your CSS didn't quite work this time. It overwrote the moderator top row and the logo row ended up shorter than it should have been. Anyway, I just undid the first thing I did and added those changes to extra.less and all is good (so far)

.p-header-content
{
    padding: 0 0;
}
.p-header-inner
{
    margin: 0 0;
    padding: 0 0;
}

 

[Brad Padgett]

Your CSS didn't quite work this time. It overwrote the moderator top row and the logo row ended up shorter than it should have been. Anyway, I just undid the first thing I did and added those changes to extra.less and all is good (so far)

.p-header-content
{
    padding: 0 0;
}
.p-header-inner
{
    margin: 0 0;
    padding: 0 0;
}

Add img to it to target the specific image. It does come to mind it would overtake the moderator bar. I had just remembered doing the exact thing you are right now and I must have targeted the image.

.p-header-logo img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}

What the code is basically doing is taking the image and giving it no connection to anything except what's relative to it which is the header. Considering that logo selector is apart of the moderator bar I wasn't thinking so targeting the image will fix it. So when you add zero to the top left and bottom you moving it to the position relative to it in that area.

 

[Jordyn]

Your CSS didn't quite work this time. It overwrote the moderator top row and the logo row ended up shorter than it should have been. Anyway, I just undid the first thing I did and added those changes to extra.less and all is good (so far)

.p-header-content
{
    padding: 0 0;
}
.p-header-inner
{
    margin: 0 0;
    padding: 0 0;
}

Throw this in your extra.less if nothing else works for logo.
Just add your logo height and mess with top and bottom.

.p-header-logo.p-header-logo--image img {
    max-height: 150px;
    margin-top: -7px;
    margin-bottom: -7px;
}