1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Responsive header style to match Xenforo

Discussion in 'Styling and Customization Questions' started by polle, Aug 5, 2013.

  1. polle

    polle Active Member

    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 ?

  2. Brogan

    Brogan XenForo Moderator Staff Member

    I don't understand the question.

    What are you trying to do?

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

    polle Active Member

    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?

  4. Brogan

    Brogan XenForo Moderator Staff Member

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

    AndyB Well-Known Member

    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.
  6. polle

    polle Active Member

    I will play with the CSS. Thanks.

    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.

  7. AndyB

    AndyB Well-Known Member

    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 likes this.
  8. polle

    polle Active Member

    Thanks Andy!

Share This Page