zen toolbar hiding button separators for anonymous users


I'm evaluating the Zen foundation add on and I've managed to customize the toolbar presented to anonymous users. I'm wondering if there's a way to also remove the button separators that appear between the different sections of the toolbar. We need to remove most buttons except for search and expando button - but that leaves three separators in the toolbar.



1 answer

1 accepted

0 votes
Answer accepted

Hi Dave,

The short answer is: yes! There is a way to remove those dividers. Unfortunately, there is not a direct method within the Brand Designer. You will instead need to add some custom CSS in your theme. If you inspect that toolbar, you'll notice that those dividers have the class "toolbar-spacer" and each has an addition class for where it is positioned.

You can add a display: none for any spacer you want to remove, and that should do the trick, as in the example below.

Please let us know if this is helpful!



#zen-toolbar .toolbar-spacer.expando-spacer {
display: none;

Hi Kelli,

Thanks for your response, that seems to be working well!

Another related question is: the fix removes the spacer for logged-in users and anonymous users alike. Is there any way to just remove the spacer for anonymous users only?



Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 13, 2019 in Marketplace Apps

Marketplace Spotlight: Marketing apps for Confluence to keep your teams working on the same page


254 views 0 6
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you