Changing Navbar Toggler Icon upon

1

Hi, What would be the technique for changing the Navbar Toggler Icon (3 line) into a Close Button Icon (X) when a dropdown is toggled open? - I would think its a matter of dynamically changing the Class element on the icon, I gave it a try but was not able to figure it out. - My page is currently static with no DB connection.

2

Remove the navbar toggler button and add a close button as in

<button class="btn-close"></button>
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button> -->

You will need to give it an on-click action.

3

I also was a little confused by the question @ben, but i think he means, how does he show a burger menu as per normal, and when the user opens the burger menu, then change it to a close button, so it needs to toggle from burger menu to close button based upon open closed states.
I think adding and removing classes would do it, but not certain, never really run into this.

4

That’s how I read the question as well.

Unfortunately, I don’t have an answer either. I don’t even know where the burger icon is set.

5

Yeah, it’s not too difficult to achieve, as it is mainly just CSS

Here we go, this is the default Wappler code generated

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Change to -->
<dmx-value id="var1" dmx-bind:value="0"></dmx-value>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation" dmx-class:change="var1.value == 1" dmx-on:click="var1.setValue(var1.value == 0 ? 1 : 0)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</button>

I set a new variable var1 with a default value of 0
I added an onclick event to check if the value is 0, and if it is change it to 1, otherwise back to 0
I added a class toggle to add the class name change whenever the variable = 1

Now add the CSS for it

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

Most of this was just adapted from w3schools by the way.

End result is

2021-09-11_02-03-13

If not working, make sure you have the following in the <head>...</head>

<script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
<script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<script src="dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer=""></script>
1 Like