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

option to remove header (with Logo) and more changes in responsive style

Discussion in 'General XenForo Discussion and Feedback' started by 3rd AnGle, Jul 27, 2013.

  1. 3rd AnGle

    3rd AnGle Well-Known Member

    I believe it is a waste of space to have header with the logo in a mobile device. Can't we just start from the Nav Bar.. It'd be Very NICE if we can have an option to disable to header in responsive design.

    and the other tabs, can we have them open on the left just like most of the apps.. Blackthorn did it very nicely... in his XenForoBook Doesn't this look better and more "Appy" :D

    Black thorn.png
     
    Brett_Campbell, Bram and Shelley like this.
  2. Matthew Hawley

    Matthew Hawley Well-Known Member

    Try this,

    Code:
    .Responsive #header {
    display: none;
    }
     
    3rd AnGle likes this.
  3. 3rd AnGle

    3rd AnGle Well-Known Member

  4. Arty

    Arty Well-Known Member

    That code will completely remove it even on desktop if responsive design is enabled. .Responsive indicates that responsive design is enabled, not that browser width is small.

    It will also remove navigation and won't change header height because it has fixed height for logo + navigation.

    Use this instead:
    Code:
    @media (max-width:{xen:property maxResponsiveWideWidth})
    {
         .Responsive #logoBlock { display: none; }
         .Responsive #headerMover #headerProxy { height: {xen:calc '@headerTabHeight * 2 + 2'}px; }
    }
     
    Lone Wolf, Jeremy, Mike and 3 others like this.
  5. 3rd AnGle

    3rd AnGle Well-Known Member

    sorry.. but i have gotto ask this foolish question... do i put these lines of code in extra.css? or is it some edit in the original template?
     
  6. Arty

    Arty Well-Known Member

    Yes, you can put it in extra.css
     
    3rd AnGle likes this.
  7. AndyB

    AndyB Well-Known Member

    One problem with this code, when logged in as a normal user the red alerts above the Inbox and Alerts are cut off.
     
    Arty likes this.
  8. Arty

    Arty Well-Known Member

    Good point. Keep some space above navigation by adding
    Code:
    .Responsive #navigation { padding-top: 20px; }
    and in that xen:calc change +2 to +22
     
    Lone Wolf likes this.
  9. Shelley

    Shelley Well-Known Member

    I don't mind the logo/header area being there and personally like @CyberAP solution where it contracts depending on responsive width. Though I'll most probably try other methods but so far I'm satisfied with my current solution.

    Screenshot_5.png
     
    CyberAP likes this.

Share This Page