CSS for tab top margin

Help
1

I am using this css snippet to remove the margin above tabs but it does not effect sidebar tabs. Does anyone know the selector to target the sidebar tabs?

.workspace-tab-header-container-inner {
	margin-top: 0px;
}

Screenshot_2022-11-01_22-33-07
Screenshot_2022-11-01_22-33-07703×102 27.3 KB

Screenshot_2022-11-01_22-33-25

2

you need to specify it’s the sidebar i.e. .mod-left-split or .mod-right-split to overwrite the app default

.mod-left-split .workspace-tab-header-container-inner,
.mod-right-split .workspace-tab-header-container-inner {
   margin-top: 0;
}
2 Likes
3

Thank you for the reply. That works on the default theme. I’m using the minimal theme, changed the sidebar tab style to index square, and it has no effect. I should have mentioned the theme before.

I had tried something like this earlier. I was digging around with the inspector, but don’t know if minimal has a special class I can’t find or figure how to write it out.

Screenshot_2022-11-02_00-59-09
Screenshot_2022-11-02_00-59-09916×194 44.9 KB

4

since u enabled minimal sidebar tab style, you need higher css specificity to overwrite it. here’s the css that can work. some ppl would just add !important but i dont like that (but i still give u the example how.

using more selector to increase specificity

.workspace-split.mod-left-split .workspace-tab-header-container-inner.workspace-tab-header-container-inner,
.workspace-split.mod-right-split .workspace-tab-header-container-inner.workspace-tab-header-container-inner {
    margin-top: 0;
}

using !important but this may disrupt your other snippets

.mod-left-split .workspace-tab-header-container-inner,
.mod-right-split .workspace-tab-header-container-inner {
    margin-top: 0 !important;
}
1 Like
5

Thanks. That saves me a few pixels and looks better in my opinion.

Screenshot_2022-11-02_02-04-03

I went with -1px.

Screenshot_2022-11-02_02-05-05

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.