A burger forming a directional arrow pointing to the right rather than a cross

Learning how to create a hamburger icon by following an online tutorial. The tutorial provides code that, when copied, generates a right-pointing arrow.

Below is the HTML and CSS code for creating the Hamburger icon:

.hamburger:hover span:nth-child(2) {
  transform: translateX(10px);
  background-color: var(--primary);
}

.hamburger.is-active span:nth-child(1) {
  transform: translate(0px, -2px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(15px);
}

.hamburger.is-active span:nth-child(3) {
  transform: translate(-3px, 3px) rotate(-45deg);
}
<button class="hamburger is-active">
  <span></span>
  <span></span>
  <span></span>
</button>

htmlcss

Answer №1

Here are the recommended tweaks for your code:

1 - Incorporate JavaScript functionality to toggle the .is-active class within the .hamburger element.

2 - Implement default styles for span.

3 - Style the span elements when the .is-active class is applied to the .hamburger element.

const hamburgerMenu = document.querySelector('.hamburger');

hamburgerMenu.addEventListener('click', function() {
  hamburgerMenu.classList.toggle('is-active');
});
.hamburger {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: all 0.3s ease;
}

.hamburger:hover {
  background-color: #ddd;
}

span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
  transition: transform 0.3s ease;
}

.hamburger.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 5px);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}
<button class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

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

Relentless underlining that feels like a trip to the

As a novice in web development, I am currently following a tutorial on creating a restaurant website. While I have encountered numerous obstacles along the way, most of them have been resolved successfully. However, I am facing an issue with my h1 element ...

htmlcssbootstrap-5coursera-api

The div element nested within the button is not visible

Fiddle I am trying to create a unique social button design that resembles the custom Google+ sign-in button: However, I encountered an issue where the second div element (to hold the right part of the button) is not displaying as expected: Here is the c ...

javascriptjqueryhtmlcss

Resize the tab header in primefaces to fit your needs

Is there a way to change the height of the tabView's header specifically in primefaces? Take for instance the tabs with headers like "God Father I", "God Father II" on this link, I only want to adjust the height of the header and not the entire tab. ...

cssprimefaces

right-floating table header with no text wrapping

Struggling with aligning an element to the right within a table header cell. Despite trying both bootstrap and plain html, I am still encountering wrapping issues. I simply need a table header where I can place an icon on the right side. I experimented w ...

htmlbootstrap-5

What are the steps to make a vertical navigation bar that stays fixed in place

Take a look at this example: . They have their shipping methods displayed vertically on both sides of the page. To achieve this effect, I used the following CSS: .vertical{ transform: rotate(90deg); transform-origin: left top 0; position: fixed; } ...

htmlcss

Text exceeding boundaries within a horizontal flexbox (accordion)

Need help with a flexbox (accordion) issue. The demo below showcases multiple groups of content, each contained within a cell in a horizontal flexbox. However, when the content within a group is extensive, it overflows the flexbox causing display problems. ...

csshtmlaccordionflexbox

Adaptable transformations within ngx-bootstrap carousel

Currently, I am in the process of learning Angular and I have encountered a problem while trying to make my site responsive using ngx-bootstrap carousel. Is it achievable to implement responsive changes within the ngx-bootstrap carousel? In the main v ...

htmlangularbootstrap-4carouselngx-bootstrap

What is the best way to create a scrollable nested div?

Link to Image My goal is to keep the red section fixed while allowing only the blue section to scroll when there is overflow. The red section consists of two divs. I have attempted using position: fixed to achieve this, but encountered issues such as ove ...

htmlcssreactjs

Could you provide steps for verifying the functionality of the show password feature in selenium?

What is the best way to verify that the show password feature is functioning correctly? Which checkbox property should I inspect after clicking on the 'show password' checkbox to confirm that the entered text in the password field is visible? ...

javahtmlselenium-webdriver

Attempting to eliminate a specific row within a table using HTML and JavaScript

Programming with JavaScript function removeElement(el) { el.parentElement.remove(); } document.getElementById('myButton').onclick = function () { const name = document.getElementById('name').value; const date = document.getElementById( ...

javascripthtmljquerycssdom

Alter appearance of images depending on browser window size

I am working on an angular JavaScript code snippet that uses the ng-repeat command to display a row of small images. I want to ensure that these images do not spill over into a second line when the browser window is resized. Instead, I prefer them to eith ...

javascripthtmlcssangularjs

Is there a way for me to duplicate a complex element multiple times within the same page?

As an illustration, let's say I have a social tab located in my header that I would like to duplicate in the footer. This tab is comprised of various buttons with SVG images on top, event listeners linked to button IDs, and CSS styling. One option is ...

javascripthtmlcssrepeatcopying

Tips for sorting the array in angularJS according to the length of its subarray

Here is a model I am working with: public class City { public string Name {get; set;} public List<Classified> Classifieds {get; set;} public List<Area> Areas {get; set;} } Within my AngularJS controller, my code looks ...

angularjshtml

Using HTML5 data attributes as alternative configuration options in a jQuery plugin can present challenges

I am currently in the process of creating my very first jQuery plugin, and I have encountered a challenge when attempting to extend the plugin to support HTML5 data attributes. The idea is for a user to be able to initialize and adjust settings simply by u ...

javascriptjqueryhtmlscroll

Dynamically disable inputs based on the selected options in a dropdown

Here is the initial HTML code that generates a select, an input, and a button: <div class="form-group"> <div class="table-responsive"> <table class="table table-bordered" id="dynamic_field"> <tr> ...

javascriptjqueryhtml

The page is not loading correctly until a refresh is done

My website seems to be displaying incorrectly on most browsers until the page is refreshed. Check it out here: I'm puzzled as to why this issue is occurring and why it resolves itself upon refresh (even without clearing the cache). The layout consis ...

htmlcsscss-float

Incorporate smooth transitioning effects with CSS onto the image carousel

My challenge involves creating a slider with 3 images and corresponding buttons that change the current image when clicked. I now seek to enhance this functionality by incorporating smooth transitions using CSS. I envision a scenario where clicking on any ...

javascripthtmlcss

Utilizing XSLT in ServiceMix

My current project involves writing an XSLT script to extract the content of a specific "content" div from an HTML page. I'm using Apache ServiceMix to create a service unit for this task, but I'm encountering some difficulties. At this point, m ...

htmlxmlxsltapache-servicemix

The misaligned navigation bar and distortion on mobile devices are causing issues with the website's layout

The logo, search bar, cart, login, and sign up are not aligned on the same line. When I try to view it on mobile, distortion occurs. The search bar and other elements get messed up. In mobile view, nothing happens when clicking on the menu collapse butt ...

csstwitter-bootstrap

Submitting the form with a target of _blank will result in the form being submitted on both a

I am currently working on a form that includes both a "Submit" button and a "Preview" button. While the submit button is functioning correctly, I am experiencing an issue with the Preview button. When clicked, it opens up a new page with the preview as in ...

phpjqueryhtmlformslaravel