XF 1.2 Gap between each single navTab

[TsinJu]

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)

 

[Lukas W.]

.navTabs .publicTabs .navTab

For the left one and

.navTabs .visitorTabs .navTab

for the right one.

 

[TsinJu]

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

 

[TsinJu]

Got it.
.navTabs .publicTabs .navTab { margin-right: 10px; } - as you suggested and it works fine
.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