The navBar example doesn't seem to work right

i’ve been trying to use this code… but the headers always seem to overrun each other .

public class MainLayout extends AppLayout {


    public MainLayout() {
        H1 title = new H1("MyApp");
        title.getStyle().set("font-size", "var(--lumo-font-size-l)")
                .set("left", "var(--lumo-space-l)").set("margin", "0")
                .set("position", "absolute");

        HorizontalLayout navigation = getNavigation();
        navigation.getElement();

        addToNavbar(title, navigation);
    }
    private HorizontalLayout getNavigation() {
        final HorizontalLayout navigation = new HorizontalLayout();
        navigation.addClassNames(
                LumoUtility.JustifyContent.CENTER
                , LumoUtility.Gap.SMALL
                , LumoUtility.Height.MEDIUM
                , LumoUtility.Width.FULL
        );
        navigation.add(
                createLink("Main", MainView.class)
                , createLink("Settings", Settings.class)
        );
        return navigation;
    }

    private RouterLink createLink(String viewName,Class<? extends Component> cls) {
        RouterLink link = new RouterLink();
        link.add(viewName);
        // Demo has no routes
         link.setRoute(cls);

        link.addClassNames(LumoUtility.Display.FLEX,
                LumoUtility.AlignItems.CENTER,
                LumoUtility.Padding.Horizontal.MEDIUM,
                LumoUtility.TextColor.SECONDARY, LumoUtility.FontWeight.MEDIUM);
        link.getStyle().set("text-decoration", "none");

        return link;
    }
}

You have to remove this code.

yes i know, i tried that ,but even if i do that, that menu isn’t centered like it is in the examples.

It looks like you have no lumo utilities configured in your theme.

See Utility Classes | Lumo | Styling | Vaadin Docs

1 Like

so THAT’S the missing link, i knew it had something to do with trying to switch to compact themes (i’m attempting squeeze a lot fields into a screen)

so initially just placing JsModule failed the app, so i learned i had to had Theme, but than i wasn’t sure if i needed to actually to add an actual theme or not

but now it doesn’t seem to make a difference if i add or remove the compact preset
i wasn’t sure if it works with hotswap , so i even stopped and restarted, but the style remains no matter what.

image

I’ve never dealt with that js thingy… in the end the compact preset is just some css variables. I would ditch that file and copy the variables to your styles.css so that you can easily tweak them even more. web-components/packages/vaadin-lumo-styles/presets/compact.js at 212637f447da1d6ef3a696ac274df9659becbebf · vaadin/web-components · GitHub