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

nav tab image

Discussion in 'XenForo Questions and Support' started by Mike Law, May 1, 2011.

  1. Mike Law

    Mike Law Active Member

    Hi,

    I need for 1 new tab on my navbar to simply be the American flag. As we are opening a new forum (yes xenforo) in the US I like to have a button on my UK forum with the flag tab, no text needed,

    How can I do this?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Mike Law

    Mike Law Active Member

    Hi,

    I don't just need the new tab, I need it to be an image without text.
    So the whole tab would be an American flag,

    No idea how to use CSS.

    Sorry about all the miss posting in wrong forums, it's confusing that this one goes to general support as it seems to be part of the template. My bad!!
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Copy the instructions in that thread but use this code instead:
    Code:
    <li class="navTab PopupClosed" style="background: url('@imagePath/images/USA.png') no-repeat; margin-left: 6px"><a href="LINK HERE" class="navLink"></a></li>
    Upload a flag image to your server.
    Change the background url path to suit.
    Change the href path to suit.
     
    Mike Law likes this.
  5. Mike Law

    Mike Law Active Member

    Will try once I am home!
    Hiding today as we had an uncomfortable earthquake early this morning again.
    And about 8 since
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    I just edited the CSS slightly to add some margin-left.
    You may need to tweak it again depending on your style and the image you use.
     
    Mike Law likes this.
  7. Mike Law

    Mike Law Active Member

    Hi,

    This is what it ends up like,
    I made the image 70x40 as thats the average tab size... not sure what I am doing wrong...

    us-tab.png

    tabs.png

    So I made the image really small and it fits... but I like it to be a little bigger...
    how can I proceed on that?

    tab1.png

    Thank you so much for the very kind support by the way!
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Unless you make the whole navigation bar bigger in height, the maximum size of the image will be dictated by that, which is around 25px I think.
     
  9. Mike Law

    Mike Law Active Member

    Thanks a lot Brogan! your a star!
     

Share This Page