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

[Lone Fox]

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

*ignore the styling... for test purposes only

 

[mistypants]

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.

 

[Lone Fox]

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


thanks

 

[mistypants]

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


thanks

We probably can't help more without a link to the site, then. There's a lot that could be wrong.

 

[rainmotorsports]

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]

header proxy

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

 

[rainmotorsports]

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:

#headerMover
{
    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.