Project

General

Profile

Wt::WNavigationBar does not work using bootstrap5

Added by Alex Serebryakov 6 months ago

Hi guys!

My command line

./hmiweb.wt --approot ./approot --docroot ./docroot --http-address 0.0.0.0 --http-port 8080 --resources-dir=/usr/local/share/Wt/resources --accesslog=./logs/access.log --errroot=./errroot

Using simple code from examples


MainWidget::MainWidget(Wt::Dbo::Session &session) : WContainerWidget(), session_(session) {
    setObjectName("MainWidget");
    //addStyleClass("container");

    navBar = addNew<Wt::WNavigationBar>();
    navBar->setResponsive(true);

    navBar->addStyleClass("navbar-light bg-light");
    navBar->setTitle("My Application", "http://www.my.org");

    auto leftMenu = std::make_unique<Wt::WMenu>();
    auto leftMenu_ = navBar->addMenu(std::move(leftMenu));

    leftMenu_->addItem("Home");
    leftMenu_->addItem("Layout");
    leftMenu_->addStyleClass("me-auto");


Open browser and I see only link "My Application". I've try to explore and all spans ("Home", "Layout") after has style "display:none". Why?

I'm peroodically trying get back to this code, but nothing work.

Could anyone provide me a simple example how can I create the navigation bar using bootstrap5.


Replies (2)

RE: Wt::WNavigationBar does not work using bootstrap5 - Added by Mark Travis 6 months ago

Your simple code is way too simple.

I don't know if you are using Windows/Mac/Linux, but look in Wt/examples (assuming you built and installed the examples) and run widgetgallery.

There is a file called Navigation.C that builds a navbar. Also look in Main.C where the bootstrap5 theme is loaded along with the stylesheets. If you don't load the bootstrap5 theme explicitly, it defaults to something other than bootstrap5.

RE: Wt::WNavigationBar does not work using bootstrap5 - Added by Matthias Van Ceulebroeck 6 months ago

Hi Alex,

as Mark pointed out, the underlying cause is that the right theme is not enabled. The navigation bar doesn't play nicely with the default or polished themes. You will need to use Bootstrap 2 at least.

    (1-2/2)