XF 1.2 Responsive header style to match Xenforo

[polle]

I need to add a header in the top of the forum and doing it like that in mobile looks terrible.

Can someone share the styles needed for mobile to match the Xenforo ones ?


Thanks.

 

[Paul B]

I don't understand the question.

What are you trying to do?

The header and logo on this site are default 1.2 functionality.

 

[polle]

I want to add another header, my site wide header that contains a logo and a navigation to all the site.

The problem of course is that it messes with XF in responsive.

I need a Logo and a navigation to act exactly as XF does, so it does not breaks the site in the different screens and rotation.

Are there some guide for max size, min size, etc... styles ?

Maybe I am doing incorrect and there is another way to do it, if thats the case, how should I add a new header between the ACP top bar and the XF navigation?

Thanks.

 

[Paul B]

You will need to add CSS to cope with the responsive design, using media queries where appropriate to remove or move content.

 

[AndyB]

I want to add another header, my site wide header that contains a logo and a navigation to all the site.

The problem of course is that it messes with XF in responsive.

If I'm not mistaken, the reason the logo on xenforo.com works properly is that it's not very tall or wide (120px by 36px). I would imagine if you create a logo on your forum with the same dimensions it would work fine in responsive. However, I suspect your logo is much larger like it is on mine and it doesn't work well in responsive.

I have not been able to figure out how to substitute a smaller logo in responsive and have the header height shrink to the correct size. What I currently do is remove the header altogether when in responsive mode. I can provide you the simple CSS to do that if you like.

 

[polle]

You will need to add CSS to cope with the responsive design, using media queries where appropriate to remove or move content.

I will play with the CSS. Thanks.

If I'm not mistaken, the reason the logo on xenforo.com works properly is that it's not very tall or wide (120px by 36px). I would imagine if you create a logo on your forum with the same dimensions it would work fine in responsive. However, I suspect your logo is much larger like it is on mine and it doesn't work well in responsive.

I have not been able to figure out how to substitute a smaller logo in responsive and have the header height shrink to the correct size. What I currently do is remove the header altogether when in responsive mode. I can provide you the simple CSS to do that if you like.

Yes, thats the problem I am having, so I will have to redo the header completely.

Sure, share it, it may help in the process.

Thanks.

 

[AndyB]

Here's the CSS I put in my EXTRA.css template in order to not display the logo block in responsive mode.

@media (max-width:@maxResponsiveWideWidth) {
  .Responsive #logoBlock {
  display: none;
  }
   
  .Responsive #headerMover #headerProxy {
  height: {xen:calc '@headerTabHeight * 2 + 17'}px;
  }
   
  .Responsive #navigation {
  padding-top: 15px;
  }
}

 

[polle]

Thanks Andy!