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

XF 1.5 Need to make header logo and navigation full width

Discussion in 'Styling and Customization Questions' started by Jim Kingsnorth, Mar 26, 2016.

  1. Jim Kingsnorth

    Jim Kingsnorth Active Member

    I have looked through a lot of posts concerning this and have not found anything that actually works. I have added a border to the right and left of a theme but the border ends at the navigation and header. So I need to do one of two things. Be able to get the border to run all the way to the top, or get the navbar and header logo and background to go full width.

    border.png

    http://charismaticcentral.com
     
  2. Jim Kingsnorth

    Jim Kingsnorth Active Member

    The border CSS code is in the General /HTML misc setting
     
  3. Jim Kingsnorth

    Jim Kingsnorth Active Member

    I was able to get the side border to the top using this code in Header.css

    Code:
    #header
    
    {
    @property "header";
    background: transparent;
    @property "/header";
    }
    
    
    {xen:helper clearfix, '#header .pageWidth .pageContent'}
    
        #logo {
    display: block;
    float: left;
    line-height:0px;
    *line-height: @headerLogoHeight;
    height: @headerLogoHeight;
    max-width: 100%;
    vertical-align: middle;
    }
    
    However now the background image for the header is missing because the code for it is now transparent to get the sidebar to display.

    header.png
     
  4. Jim Kingsnorth

    Jim Kingsnorth Active Member

    Any ideas?
     
  5. Jim Kingsnorth

    Jim Kingsnorth Active Member

    No Jim, I can't help you with that.
     
  6. Jim Kingsnorth

    Jim Kingsnorth Active Member

    I give up!
     
  7. Brad P

    Brad P Active Member

    ^ he gave up? :eek:

    First off is this style 3rd party ? If yes please speak to the designer.
     
    Last edited by a moderator: Apr 1, 2016
  8. Jim Kingsnorth

    Jim Kingsnorth Active Member

    No, it is not third party.
     
    RamzanHD likes this.
  9. RamzanHD

    RamzanHD Active Member

    Right click on the logo and use inspect element and play around with it .

    You can start with the little CSS that should change the width and height or you can use margin to move it up or down like this ...
    Margin-top: -5px; Move up
    Margin-bottom: -5px; move down



    Code:
    width: 250px;
    Height: 250px;

    Hope it helped
     
  10. RamzanHD

    RamzanHD Active Member

    And revert the templates you edited and use margin to move it up
     

Share This Page