Issue with button causing imbalance in hamburger icon alignment

How can I make the two-lined hamburger icon change to an X shape when the .btn-menu is clicked? Currently, the lines are not centered properly. Can anyone help me identify what I am missing in my code?

Below is the HTML, CSS, and JavaScript code that I have been working on:

const menuBtn = document.querySelector(".btn-menu");

    // Create menu animation
    menuBtn.addEventListener("click", function () {
    menuBtn.classList.toggle("transform"); 
    });
 .btn-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.8rem;
    transition: all 0.6s;
  }

 .toggle-line {
    width: 5rem;
    height: 1rem;
    background-color: black;
    border-radius: 3px;
  }

  .is-top,
  .is-bottom {
     transition: all 0.5s;
  }

 .transform .is-top {
    transform: translateY(8px) rotate(45deg);
  }

 .transform .is-bottom {
    transform: translateY(-8px) rotate(-45deg);
 }
<div class="btn-menu" role="button">
    <div class="toggle-line is-top"></div>
    <div class="toggle-line is-bottom"></div>
</div>

htmlcssanimationcss-animations

Answer №1

It appears that the key missing element you need for your desired effect is the transform-origin CSS property. This property specifies where the center of a transformation should be positioned. To achieve the effect you want, I have made modifications to your code below.

(Please note: I have removed the translateY transformations)

const menuBtn = document.querySelector(".btn-menu");

    // Create menu animation
    menuBtn.addEventListener("click", function () {
    menuBtn.classList.toggle("transform"); 
    });
.btn-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.8rem;
        transition: all 0.6s;
      }
     
     .toggle-line {
        width: 5rem;
        height: 1rem;
        background-color: black;
        border-radius: 3px;
        transform-origin: 25% 50%;
      }
     
      .is-top,
      .is-bottom {
         transition: all 0.5s;
      }
     
     .transform .is-top {       
        transform: rotate(45deg);
      }
     
     .transform .is-bottom {        
        transform: rotate(-45deg);
     }
<div class="btn-menu" role="button">
    <div class="toggle-line is-top"></div>
    <div class="toggle-line is-bottom"></div>
</div>

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

Clear out the classes of the other children within the identical parent division

I'm currently in the process of replacing my radio circles with div elements. I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div. However, I'm facing trou ...

htmljquerycssradio-button

Guide to positioning text alongside icons with Bootstrap

Struggling to align text next to these icons? Don't worry, we've all been there. Especially with bootstrap - it can be tricky! Can someone please guide me on how to do this? <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstr ...

htmlcsstwitter-bootstrapfrontend

How to dynamically insert an em tag into a table header cell using Asp.net

In my code, I have a table with dynamically generated table headers. One of the headers is for a textbox column. var thc = new TableHeaderCell { Text = "Iteration", CssClass = "iteration" } Now, I need to modify the logic to display a label indicating wh ...

c#htmlasp.net

Utilize Bootstrap to ensure that column size remains consistent at 12 on small devices, while maintaining default behavior on larger devices

I have a component that has the ability to hold any number of elements. My goal is to have the elements stack on top of each other and take up the full width of the container when the screen is small, but revert to the default Bootstrap column behavior on ...

htmlcssbootstrap-4

What is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

I need to run a Selenium Code written in Java from a NAS (Network Attached Storage) or another connected machine. My goal is to create a web page with a button that, when clicked, triggers the execution of the Selenium script located on the connected mac ...

javascripthtmlseleniumuibuttonbuttonclick

What is the best way to enclose a handlebars expression within a span element while also making the span clickable?

In the button, the datePick string is a computed property that can be clicked on to trigger an event. However, clicking outside the datePick value inside the button does not trigger the event. Even after wrapping it inside a span and setting width: 100%, ...

htmlcssember.jshandlebars.js

Encountering a NextJS error with head component

Trying to incorporate the head element into a NextJS page format has proven challenging. Despite consulting the official documentation, implementing next/head to add <head> has resulted in an error within the code block. Code: import Head from &apos ...

javascripthtmlreactjsnext.js

Switch the selected option in JQuery UI dropdown using a clickable button

I have a code snippet that is almost working. My goal is to change the selection of a JQuery dropdown select combobox using a separate button named "next". What I want is for the JQuery dropdown to automatically switch to the next selection every time I c ...

javascriptjqueryhtmlcombobox

Implementing a document click event to reset timeouts using JQuery

I'm having trouble resetting a timeout timer every time there is a click interaction with the document. The clearTimeout function doesn't seem to be working as expected. Here is the jQuery code snippet: $(document).click(function(e){ $("#vidB ...

javascripthtmljquerysettimeout

Modifying the Placeholder Color in a Material UI Autocomplete: Tips and Tricks

In my team, we are working on two projects that both utilize an internal library with a header containing a search box. In one project, the placeholder text "Search" displays normally. https://i.stack.imgur.com/lhL5V.png However, in the second project wh ...

htmlcssreactjsmaterial-ui

Is there a way to display x squared as a superscript inside a button element?

In my reactjs project, I am developing a basic calculator. One of the buttons is supposed to calculate x squared, and I tried using the <sup> HTML element for this purpose but it did not work as expected. <Button name = "x<sup>2</sup> ...

htmlreactjs

similar element with alternate background shade

I have a custom component that I am using multiple times on a Vue page. I want to customize the background color for each instance of this component. Here is the code for my component: <template> <div class="project-card" :style="{backgroundCo ...

cssvue.jscomponents

Displaying combined data from various databases in an HTML table

I have a database that consists of 5 tables, with one dedicated to storing IDs. My goal is to establish links between this ID table and the other tables in order to display their corresponding names. For instance: ask Genre: Action This query should retu ...

phphtmlmysqlsqlhtml-table

Using JavaScript to print radio type buttons

Currently working on a web page and I've encountered a problem that's got me stumped. There are two sets of radio buttons - the first set for package dimensions and the second set for weight. The values from these buttons are assigned to variable ...

javascripthtmlcss

What could be causing a single image not to show up on an HTML page?

I have been searching tirelessly for a solution but cannot seem to find one. Interestingly, in my HTML document, an image appears perfectly fine when viewed from my browser. However, once I upload my website to a server host, this specific image refuses to ...

htmlcss

Rotating the Orientation of Cellphone Images

Currently facing an issue where the images I am attempting to display on a basic html page appear rotated to the left, likely due to being taken by a cellphone. These images are stored on my computer. I have tried using the css property image-orientation: ...

pythonhtmlimageorientationexif

Gallery not responsive on HTML/CSS site

Hi there, I'm a newcomer to Stack Overflow and currently diving into the world of HTML/CSS. I've hit a roadblock with my latest project - I'm trying to create a gallery of album covers, but when I try to 'zoom in' on the webpage (n ...

htmlcssresponsive-design

Pagination displays identical data on each page

When utilizing pagination in my AngularJS application to display search results fetched from an API call, I encountered an issue where the same data set appears on all pages. Here's what I have attempted: Within the Controller $rootScope.currentPag ...

htmlangularjspaginationcontroller

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

push one element to fit in between two adjacent elements

Is there a way to make my responsive webpage ensure that the full-screen element appears between sibling elements when viewed on mobile devices? Check it out on desktop or on mobile here. I have three (div) elements: two in one row and another in a separa ...

htmlcss