button navbar-burger displays the wrong background color

[damienjacques]

Hi,

The color of the burger menu, button navbar-burger, (appearing for small windows) is not the right one (it is when hovered). I think it's a problem coming from Bulma but it's a bit weird. Any idea how to solve this? I guess I can add some CSS but it's not the most elegant approach.

Thanks for the package.

See example below:

library(shiny)
library(shinybulma)

shinyApp(
  ui = bulmaPage(
    bulmaNavbar(
      color = "primary",
      bulmaNavbarBrand(
        bulmaNavbarItem(
          "shinybulma",
          href = "Item 1"
        ),
        bulmaNavbarBurger()
      ),
      bulmaNavbarMenu( # not visible on smaller devices
        bulmaNavbarItem(
          "Item 1"
        ),
        bulmaNavbarItem(
          "Item 2"
        ),
        bulmaNavbarItem(
          "Item 3"
        )
      )
    )
  ),
  server = function(input, output) {
  }
)

[damienjacques]

Note that removing color = "primary" allows you to have something nicer but there is still a very ugly grey border around the button that shouldn't be there.

[damienjacques]

I think I found the solution to the issue thanks to here.

navbar-burger should not be defined as a button but rather as:

<div class="navbar-burger">
  <span></span>
  <span></span>
  <span></span>
</div>

There is confusion due to contradictory information in bulma's documentation.

Can you please make the change?

[JohnCoene]

The solution you point to would not work on my end so I pushed a different fix, can you reinstall Github version and tell me if it works? Nothing to change in your code.

[damienjacques]

Yes, it is working :) ! Thanks

The only thing is that in your new implementation the default color is set to primary, the ideal would be to inherit (by default) this parameter from bulmaNavbar (so that if my navbar is white, so is the burger). But in practice, it's not very complicated to make the change in both functions. It's just a detail.

Thanks a lot.