Valo - Increase height responsive menu

Flow
1

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?

2

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;
}