vuejs hamburger menu using nav-collapse needs to be high contrast

Question

I am trying to make the hamburger menu in high contrast for accessibility.

I've tried the following code in vue-js:

 <b-navbar-toggle target="nav-collapse" style="color:#000 !important; background-color: #fff !important; opacity: 1.0 !important; " ></b-navbar-toggle> <!-- hamburger menu -->

However, although the background becomes white; the lines of the hamburger menu become gray instead of black. This means there is less contrast.

I've tried different levels of opacity, but that just seems to make it worse.

Is there a solution that can make the hamburger menu using nav-collapse have higher contrast while not interfering with its functionality?

Answer 1

Perhaps you should take a closer look at making a custom navbar toggle and shove your (contrasting) SVG into it. Custom navbar toggle according to the documentation is created as follows (Example from the documentation !):

<b-navbar-toggle target="navbar-toggle-collapse">
  <template #default="{ expanded }">
    <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
    <b-icon v-else icon="chevron-bar-down"></b-icon>
  </template>
</b-navbar-toggle>

Accordingly, inside the template you can use your SVG