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

XF 1.2 How can I move the logo image away from the navigation?

Discussion in 'Styling and Customization Questions' started by Lone Fox, Jan 31, 2014.

  1. Lone Fox

    Lone Fox Member

    ok, I'm a little depressed here because I'm finding XenForo difficult to style. Although I'm not talented in web design.

    Everything I try to do position the 200 logo image does not work. I'm basically trying to keep the logo centered between the top of the page and the navigation... like XenForo is by default. My logo is taller and...

    adding a bottom padding to #logo doesn't work, it actually pushes the navigation over the .titlebar

    I haven't even touched the nav tabs yet :(

    [​IMG] [​IMG] [​IMG]
    *ignore the styling... for test purposes only
  2. mistypants

    mistypants Well-Known Member

    Style Properties -> Header and Navigation -> Settings. Change Height of Header Logo to the dimensions of your logo image. No need to play with padding or margins.
    Amaury likes this.
  3. Lone Fox

    Lone Fox Member

    I've already tried that (#logo height), I have a white bar above the nav... I'm doing something wrong I'm sure.

  4. mistypants

    mistypants Well-Known Member

    We probably can't help more without a link to the site, then. There's a lot that could be wrong.
    Lone Fox and Amaury like this.
  5. rainmotorsports

    rainmotorsports Well-Known Member

    If we had a look there are plenty of people here who can help you. I have a feeling the site is behind closed doors at the moment.

    There is a header proxy that moves the page down which actually calculates partly based on logo height. That is something I personally removed and gave a fixed height. Thats one line to look at in the css.
    Lone Fox likes this.
  6. Lone Fox

    Lone Fox Member

    header proxy o_O

    Yes, I understand if I posted a link... it's just all the work I have done isn't online. I may post a link at a latter time.
    I don't know how you guys style forums, but maybe I'm weird... I've always copied files to a hard drive folder and edited the .html, and .css files; then I work offline/off the server. Not sure why, just like if I make a complete hack of it I can just delete the files.

    of course... for learning/testing purpose only
  7. rainmotorsports

    rainmotorsports Well-Known Member

    The headerMover and headerProxy div is in the PAGE_CONTAINER template and the css is in the public.css here is the css for it:
        position: relative;
        zoom: 1;
        #headerMover #headerProxy
            @property "header.background";
            background-color: @primaryMedium;
            @property "/header.background";
            height: {xen:calc '@headerLogoHeight + @headerTabHeight * 2 + 2'}px; /* +2 borders */
        #headerMover #header
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
    You can see there the height line calculation. That there defines how far the page will be moved down to make room for the header, logo etc. Not sure what trouble you are running into but one thing to try is to set a height that is fixed and then work with the positioning of the logo div as needed.

    The concept of a header mover or proxy is somewhat common in css templates that have a header and a footer. Its not the end all solution but the stock template makes use of it.

    I have a feeling thats not really the problem you are having but sometimes its the first place I would start to give myself room. After that I would work on positioning the div for the logo as needed.

Share This Page