Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Valo - Increase height responsive menu
Hi,
how can I increase the height of valo menu when it's in 0-800px range?
I've seen that .valo-menu-item height is equal to $v-unit-size, but i cannot increase that value because 'everything' is regulated by that variable.
I cannot also put a css statement with the height set as !important because valo will not recognize the new height and menu would overlap with underlying elements.
How can I solve this?
Hey,
Seems that the height is based off of the line-height of the span elements. However, due to vertical-align being set to center, the height is set to 31px, instead of 30px. If you want to fix that issue, you can set vertical-align to bottom for the span elements.
As to your question, here's one solution:
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Responsive.makeResponsive(this);
this.addStyleName("make-me-responsive");
CssLayout menu = new CssLayout();
menu.setPrimaryStyleName("valo-menu");
CssLayout menuItems = new CssLayout();
menuItems.setPrimaryStyleName("valo-menuitems");
for (int i = 0; i < 10; i++) {
Button btn = new Button("Menu #" + i);
btn.setPrimaryStyleName("valo-menu-item");
menuItems.addComponent(btn);
}
menu.addComponent(menuItems);
layout.addComponents(menu);
}
SCSS
.make-me-responsive [width-range~="0-800px"] .valo-menu-item {
line-height: 48px;
}