cssflexboxresponsive-designcss-positionfixed

Absolute icon in flexbox content with fixed navbar

Im having a fixed left navbar and using flexbox for 2 columns, navbar and content.

Have to add a toggle button in the middle of navbar and content to toggle the navbar.

Trying to add the button

 <button
          (click)="clickToggle(clicked)"
          ....

But its not aligned as it should.

Someone can help ? enter image description here

Code production below:

https://stackblitz.com/edit/demo-jqnmjn?file=app%2Fapp.component.html,app%2Fapp.component.css

Solution

  • So you want the button to be positioned as presented in the picture above?

    One option would be to place the button inside of your aside tag. The aside tag then needs:

    position: relative;

    Then your button needs to be positioned absolutely:

    position: absolute;
right: 0;

    Adjust top or bottom values to position the button vertically. To have the button sit right in between you 2 columns you could eather use a negative right value. Or you could you could make use of the transform: translateX() function.