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

XF 1.2 Gap between each single navTab

Discussion in 'Styling and Customization Questions' started by TsinJu, Jan 24, 2014.

  1. TsinJu

    TsinJu Well-Known Member

    I would like to set a gap between each navigation Tab, because i set a Background and would like them looking more separated, but unfortunately i dont know which class to use for?!

    Here´s a Screenshot with an Example how it should look like (see red Arrows)
  2. katsulynx

    katsulynx Well-Known Member

    .navTabs .publicTabs .navTab
    For the left one and
    .navTabs .visitorTabs .navTab
    for the right one.
  3. TsinJu

    TsinJu Well-Known Member

    Thank you.
    Problem with every .tab class i´ve tried is that if i select the opposite side (selected Tab) it changes the position for the whole .publicTabs and .visitorTabs again, which gives a "shaking" effect
  4. TsinJu

    TsinJu Well-Known Member

    Got it.
    .navTabs .publicTabs .navTab { margin-right: 10px; } - as you suggested and it works fine (y)
    .navTabs .visitorTabs li { margin-left: 10px } - instead of using .navTab here too i choosed li which keeps the tabs where they are.

    Edit: Seems its just working with nth
    .navTabs .visitorTabs .navTab:nth-child(1n+2)
    Problem here is the Browser Compatibility, because nth doesn´t work with older IE Browsers but with just .navTabs .visitorTabs .navTab the last Tab also gets the Gap. Dont know why.......
    With puplicTabs it works fine

    After trying and trying..... i think i did it.
    Looks like it just works this way to keep the Tabs where they are.
    Eveything else sets the publicTabs a margin which is not wanted if a publicTab is selected

    .navTabs .navLink, .navTabs .SplitCtrl { margin: 0 5px; }
    with that you will have a brighter background thats sticks out left and right side if a darker BG is set to each navTab.

    using .navTabs .navTab.PopupClosed:hover { background-color: rgba(0, 0, 0, 0) !important; } will solve it.

    Thank you
    Last edited: Jan 24, 2014

Share This Page