Wt

Hi there,
i am about to create WebApp with smartphone as main target. Therefore, it should have a bottom navigation bar (as found in MaterialDesign, iOS and Android Apps).

As a starting point, i tried it with WNavigationBar:

    Wt::WNavigationBar* navBar = addNew<Wt::WNavigationBar>();
    navBar->setResponsive(true);
    navBar->addStyleClass("navbar-expand-sm fixed-bottom navbar-light bg-light text-center");
    auto container = navBar->addWidget(std::make_unique<Wt::WContainerWidget>());
    auto hbox = container->setLayout(std::make_unique<Wt::WHBoxLayout>());
    hbox->addWidget(std::make_unique<Wt::WIcon>("fa fa-tachometer fa-2x"));
    hbox->addWidget(std::make_unique<Wt::WIcon>("fa fa-area-chart fa-2x"));
    hbox->addWidget(std::make_unique<Wt::WIcon>("fa fa-gear fa-2x"));

This already creates a bar at the bottom of the page, which occupies the entire width.
unfortunately, my icons are not spaced evenly across the entire width (condensed on the left instead) when expanded.
However, if i scale down the window to make the menu collapse and i toggle the menu button, my icons some to be arranged quite nicely.

How could i realise that? Or should i stay away from WNavigationBar completely?
I also did not manage to create what i want with e.g. WBorderLayout. How do i occupy the entire screen/browser window with the latter one? Or how would i align a widget to the bottom?

Thanks a lot!