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

How do you control the space before Home?

Discussion in 'XenForo Questions and Support' started by Weston, Jan 8, 2011.

  1. Weston

    Weston Member


    I'v been changing the default navbar a bit as you can see but I can't figure out how to control the space between the edge and the Home button. I want to drop a red border over the bottom to cover up the middle line... like so:


    But the only code in Navigation before Home is:

    <div class="bgnav">

    xen:edithint template="navigation.css" />

    div id="navigation" class="pageWidth">
    div class="pageContent">

    div class="navTabs">
    ul class="publicTabs">
  2. Brogan

    Brogan XenForo Moderator Staff Member

    I'm not sure you'll be able to achieve that as it's the bottom border of the upper navigation tabs div.
  3. Weston

    Weston Member

    Perhaps not, I'm sorta blindly stomping through this but I figured I could cover it up in the same way the Active Tab does it.

    EDIT: Well I'd have to create a new empty button... that's why I want to remove that space so I can fill it with an empty tab then drop the border on it.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Well you can remove that gap altogether by getting rid of the 25px padding so the home tab will be right up against the edge then.
  5. Weston

    Weston Member

    Thanks, I totally missed that somehow. Anyway I got it to work, I put a...
    <li class="navTab" style="width: 25px; border-bottom: 1px solid @primaryDark; height: @headerTabHeight"></li>
    Right above <!-- home --> in the Navigation template.

    EDIT: Thanks for the move, I didn't realize I had posted in the wrong place.
  6. Carlos

    Carlos Well-Known Member

    I have a similar question, can I do this kind of padding for a div? o_O
  7. Brogan

    Brogan XenForo Moderator Staff Member

    A div is just a section or block of content so you can style it how you like.
    Just use <div class="my_style>My content</div> and create the css class .my_style with the attributes you want.
  8. Weston

    Weston Member

    If it's a specific div (i.e. you only need to alter one) you can just do on the spot alterations using a style="xxxx".

    For example <div class="pageContent" style="padding: 10px;"> would override whatever padding .pageContent might have had but the rest of it's CSS attributes will still shine though.
  9. Carlos

    Carlos Well-Known Member

    The reason why I asked about it is because even though that I got the div working, the distance between the line and the content is about as close as you can get to 'hugging.'

    So, I wanted to make some space between the line and the content within the div.

    I will try Weston's solution.
  10. Brogan

    Brogan XenForo Moderator Staff Member

    I'm not entirely sure what you mean.
    Can you post a link and a mockup of what it is you're trying to achieve?
  11. Carlos

    Carlos Well-Known Member

    www.mw2forums.com / www.mvc3forum.com - look at the bottom where it says 'CarlosX360 Network" look at the space between the outer border and the first letter "C."
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Change your css to this:
    .mw2f_footer_links {
        border: 1px solid #295909;
        color: #FF9705;
        padding: 0 4px;
    That will add 4px padding to the left and right of the div and no padding to top or bottom.

    Padding is applied in this order: top, right, bottom left, so if you do padding: 2px 10px 5px 8px for example, that will be 2px top, 10px right, 5px bottom, 8px left.

    If you do it as 2 values then it is top/bottom together and left/right together.
    Carlos likes this.
  13. Carlos

    Carlos Well-Known Member

    Thank you sir! :)

Share This Page