Kuklin István Kuklin István - 10 months ago 83
CSS Question

JavaFX - How to create a thin MenuBar?

I've placed at the top of a

BorderPane
a
MenuBar
with a "File" Menu and a "Close"
MenuItem
inside:

Thick menubar

How can I make it look thinner like the
MenuBar
s of most of the software I use, similar to the image below?

Thick menubar

I think it must be simple enough but as a beginner I couldn't really google it. I'm not sure how to name the problem (not many useful results for "javafx menubar height", size, styling, etc.)

Answer Source

Adding the following selectors to you stylesheet reduces the height of each menu element:

.menu-item { -fx-padding: 1 5 1 5; }
.menu { -fx-padding: 1 5 1 5; }

enter image description here

To remove the padding of all context menus, you can additionally add:

.menu .context-menu { -fx-padding: 1 1 1 1; }

enter image description here

And you can also decrease the font size:

.menu-item >.label {-fx-font-size:9;}
.menu >.label {-fx-font-size:9;}

enter image description here

Furthermore you can remove the left right padding of the MenuBar and decrease the spacing:

.menu-bar {
  -fx-padding: 0 1 0 1;
  -fx-spacing: 1;
};

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download