Animate the Hamburger Icon in BSS

Bootstrap Studio Help
1

Is there a way to animate the hamburger icon within BSS without breaking the default navbar block code? The hamburger icon used to be made up of 3 span items. But in Bootstrap 4, this has been changed to an icon.

2

Have you tried using Bootstrap 4's menu so that it's already set up? If you're creating a BS 4 site, BSS is already set up for it and most likely has some built in menus in the components that will already include the proper hamburger menu setup.

3

@kahwye I was able to use the following CSS that worked with the svg image of BSS4 Navbar's hamburger menu. So you can see that you can animate the hamburger menu icon. You will only be able to see this effect in a browser preview though.

CSS

.navbar-light .navbar-toggler-icon {
  transition:all .5s linear;
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
  transform:rotate(90deg);
}

Just because BS4 decided to use svg images, you can still use CSS to override that to be say a Font Icon like from Font Awesome.

CSS

.navbar-light .navbar-toggler-icon {
  background-image:none;
  transition:all .5s linear;
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
  transform:rotate(90deg);
}

HTML

<span></span>

I used the above CSS and then set the hamburger icon to display flex in the Options pane and then added the classes fa fa-star justify-content-center align-items-center to the icon in the ATTRIBUTES pane then I added as a linked CSS https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css in the Design pane.

Saj

4

sigh.. stupid me.. you can drag/drop an icon component on to the hamburger menu spot and still use the CSS but you don't need to add the class fa fa-star and you don't have to specifically add the font awesome css because the app will do that for you if you use the icon component.

Saj