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

How to put a second right aligned logo in the header

Discussion in 'Styling and Customization Questions' started by RobinHood, Aug 10, 2012.

  1. RobinHood

    RobinHood Well-Known Member

    I'd like to put a second image in my header (logo is on the left) and have it flush against the right edge of the page width and the top of the nav bar.

    I've tried a few templates and however I'm doing it screws up in IE. I've tried floating it to the right of the header and the ad template, but I can't get it right.

    There's usually about 2px between the bottom of the image and the top of the nav bar, and I can't get any closer without it pushing the nav bar down, plus the IE issues.

    Any ideas?

    The red is where I'd like to put it.

    image header right.png
  2. Steve F

    Steve F Well-Known Member

    Place this in the ad_header template.

    <div class="logoRight">
        <a href="http://fffsquad.com/" target="_blank">
            <img src="PATH/TO/IMAGE/" style="margin-top:30px; width:100px; height:100px; float:right;" />
    That will help get started, change the inline styling to suit..
  3. RobinHood

    RobinHood Well-Known Member

    That's really weird, that's exactly why I tried (no width or heigh and the margin is 17px), however I was using CSS to style the div.

    The exact same code inline like you've posted it works, but via CSS there's always a gap between the bottom of the image and the nav bar o_O



    I wonder why that is?

    Anyway, it's working now :) One more question, when the page gets too thin the right image jumps above the left image, is there a way to set it so it fall behind the left image instead, keeping the header the same height?

  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I suggest setting a min-width for that area to avoid it getting too small to accommodate the two images.

    Having it slide behind the other image means the right image needs to be a background. I am reminded of this as a code example:


    That shows how you can set a background image, right-aligned, no repeat using CSS.
    RobinHood likes this.
  5. RobinHood

    RobinHood Well-Known Member

    Thanks Jake, I'll give that a go :)

Share This Page