NG-Bootstrap Navigation Bar- dynamic hamburger icon animation

I have been trying to implement an animated hamburger animation on the navbar using ng-bootstrap and Angular, but so far I have had no success. While the Navbar does collapse as expected, it lacks the animation and transformation into an 'x'. I would appreciate any help or guidance from anyone who has experience with this.

HTML

  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarGrey"
          aria-controls="navbarGrey" aria-label="Toggle navigation"
          (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed">

    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>
    <span class="sr-only">Toggle navigation</span>
  </button>

scss

// Custom Navbar styling

.navbar-toggler {
  border: none;
  background: transparent !important;
}
.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

.navbar-toggler .icon-bar {
  background-color: #fff;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 5px;
}

//Animation section   <== experiencing issues here

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

EDIT

I have also provided a StackBlitz link for further reference and collaboration.

cssangularbootstrap-4css-animationsng-bootstrap

Answer №1

To create animated styles for your navigation bar, utilize 

.navbar-toggler[aria-expanded="false"]
when the bar is expanded and you want to display an "X" icon instead of the default hamburger icon (.navbar-toggler). Conversely, use 
.navbar-toggler[aria-expanded="true"]
when the bar is collapsed and you want to display the hamburger icon instead of the "X". Below is the complete CSS code for the animation:

// Animation section
.navbar-toggler[aria-expanded="false"] .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler[aria-expanded="false"] .middle-bar {
  opacity: 0;
}

.navbar-toggler[aria-expanded="false"] .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 0% 50%;
}

.navbar-toggler[aria-expanded="true"] .top-bar {
  transform: rotate(0);
}

.navbar-toggler[aria-expanded="true"] .middle-bar {
  opacity: 1;
}

.navbar-toggler[aria-expanded="true"] .bottom-bar {
  transform: rotate(0);
}

It appears that ng-bootstrap modifies the aria-expanded attribute to indicate the navbar's state rather than toggling the collapsed CSS class.

For a demonstration, please refer to this StackBlitz link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Unexpected input detected in `ts.resolveTypeReferenceDirective`. This issue may lead to a debug failure

I'm encountering the error below: { "name": "Angular", "version": "1.0.0", ... } If anyone has insights on what steps to take next or the potential cause of the problem, your input would be greatly a ...

node.jsangulartypescriptwebpack

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

javascripthtmlcss

CSS selectors can be used to alter the styling of the container surrounding the text

My current content includes: <span> Hello </span> I am looking to apply CSS selectors to either replace or enclose the text inside the element with an <h1> Is it doable using only CSS selectors? ...

htmlcss

Ensure that only one menu with a specific class is open at any given time

My goal is to ensure that both menus cannot be open simultaneously. The desired behavior is as follows: When one menu is already open and you click on another, the first one should automatically close. For a better understanding of what I am trying to achi ...

javascriptjqueryhtmlcss

Using Angular's [ngIf], [ngIfElse], and [ngIfElseIf] functionalities enables dynamic content rendering

Currently, I have the following code snippet: <ng-container *ngIf="someCondition"> <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second"> <div class="row"> fir ...

htmlcssangulartypescriptng-template

Unable to populate ng2 piechart with received data from HTTP response

Below is the HTML markup I've used to display a pie chart from the NG2-Chart library, which has a dependency on chart.js: <h2>Home</h2> <div style="display: block"> <canvas baseChart class="chart" [data]="pieChart ...

angularchart.jsng2-charts

I could see the Javascript and CSS code manifesting directly onto my HTML page

I've encountered a strange issue with my calendar code where my JavaScript and CSS codes are inexplicably showing up next to the calendar. Does anyone have any insights into why this may be happening? I developed the code in an online HTML/CSS/JS edit ...

javascripthtmlcss

Unable to apply a border to the button

I'm having trouble adding a border to my button on the website. I've tried setting the color, which works fine for the font color within the button, but the border properties are not working. Despite trying some highly rated solutions, none of th ...

css

Is it possible to utilize the $ symbol within the ngOnInit or constructor functions?

I recently encountered an issue while trying to use the dollar sign ($) in my constructor function, specifically within ngOnInit() and translate.instant. Here is a snippet of the code that caused the problem: declare var $: any; { var SelectedDevice = ...

jqueryangulartypescript

How come my DHTML navigation bar is displaying incorrectly in Internet Explorer 7?

This particular issue has me completely baffled. Normally I can navigate through most IE7 CSS bugs with some clever adjustments here and there, but this one has really stumped me! Take a look at the example page in IE7 and you'll notice that when hov ...

cssmenuinternet-explorerdrop-down-menudhtml

AngularJS Application experiencing extremely slow performance with IE's "Style Calculation" feature

In my AngularJS app, I am using Angular Material and loading data from an external API. Everything runs smoothly in Chrome, Firefox, and Safari, but when it comes to Internet Explorer, the performance is abysmal. The app becomes slow, CSS animations are c ...

cssangularjsperformanceinternet-explorer

Persistent error caused by unresponsive Tailwind utility functions

Currently, I am working on a Next.js application and encountered a strange error while adjusting the styling. The error message points to a module that seems to be missing... User Import trace for requested module: ./src/app/globals.css GET /portraits 500 ...

csstypescriptnext.jstailwind-css

The call stack size has reached its maximum limit due to running 2 Collection.find commands

I've encountered a Maximum call stack size exceeded exception in my Chrome console while working with Angular2 and Meteor. This issue started after I added the following code to my client side: var userChannelsId = UserChannels.find({idUser: Meteor.u ...

javascriptmongodbangularmeteor

Challenge with Angular date selection component

I am currently utilizing ngbdatepicker in my form. I want to save the date separately and retrieve it as shown below. <input class="form-control ngbfield custom-form-control" required [ngClass]="{'is-invalid':f.touched && birthDay.inv ...

javascriptangular

Rails application encounters issue where CKEditor is removing style elements from span classes

In my current setup using Rails 4.1.4, Ruby 2.1.2, and CKEditor 4.1.1 integrated with Rails Admin, I am facing an issue. Whenever I enter text in the CKEditor text area and apply a font or font size, it saves successfully. However, upon viewing the content ...

javascripthtmlcssruby-on-railsckeditor

Exploring the versatility of Angular by creating various flex layouts with Angular Material cards

I'm struggling to implement the design shown below using cards and a flex layout in a responsive way. I've tried working on it using StackBlitz but haven't been able to get it right - the margin and layout get messed up on different screens. ...

cssangularflexboxangular-material

Pause before sending each request

How can we optimize the Async Validator so that it only sends a request to JSON once, instead of every time a letter is typed in the Email form? isEmailExist(): AsyncValidatorFn { return (control: AbstractControl): Observable<any> => { ...

javascriptangulartypescriptrxjsdebouncing

CSS fails to display image within PHP script

Having an issue with displaying CSS through a PHP file. Everything seems to be working fine until I try to display an image from the database. The source code does accept the value from the DB, but the image doesn't show up. Interestingly, the image d ...

phpcssimage

The span element remains the same width even with the display property set to flex

How can I center a span element within a container div when the span is preceded by another div? Here's my current code: <div id="container"> <div id="a">A</div> <span id="b">B</span> </div> #container { ...

htmlcssflexbox

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

I've been attempting to create a similar animation using html and css. Below gif shows the desired outcome I am aiming for: https://i.sstatic.net/YsNGy.gif Although I have tried the following code, I have not been able to achieve the desired result ...

javascripthtmlcss