Determining the location of the hamburger item on the bar

As I work on creating a hamburger icon, I am faced with the challenge of accurately positioning the bars without guessing. The height of the hamburger is 24px, and I initially thought placing the middle bar at half the height (12px or top: 12px) would center it. However, upon testing, using a top value of 10px or 0.625em seems to align it better within the overall menu.

What is a more effective method for calculating positions in CSS?

Check out this code snippet for reference.

<div class="hamburger">
  <div class="hamburger__top"></div>
  <div class="hamburger__middle"></div>
  <div class="hamburger__bottom"></div>
</div>

SASS

.hamburger {
  position: relative;
  width: 3em;
  height: 1.5em;
  cursor: pointer;
  div {
    background-color: red;
    position: absolute;
    width: 100%;
    height: .25em;
  }
  &__top {
    top: 0;
  }
  &__middle {
    background-color: green;
    top: 0.5em;
  }
  &__bottom {
    bottom: 0;
  }
}

Answer №1

You can achieve that with Flexbox without the need for positioning.

Here are a couple of solutions:

.hamburger {
  width: 3em;
  height: 1.5em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: 1em auto;
}
.hamburger div {
  background-color: red;
  height: .25em;
}
.around {
  justify-content: space-around;
  background: lightblue;
}
.between {
  justify-content: space-between;
  background: lightgreen;
}
<div class="hamburger around">
  <div class="hamburger__top"></div>
  <div class="hamburger__middle"></div>
  <div class="hamburger__bottom"></div>
</div>

<div class="hamburger between">
  <div class="hamburger__top"></div>
  <div class="hamburger__middle"></div>
  <div class="hamburger__bottom"></div>
</div>

Answer №2

Instead of using top: 0.5em, you can try this:

top: 50%;
transform: translateY(-50%);

In my opinion, setting top: 50% will position the top of the element in the middle. Then, by using translateY(-50%), the element will be moved up half its own height, resulting in it being vertically centered.

See an example here: http://example.com

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 message: Undefined index error when trying to decode JSON

In my database, there's a JSON file named articles.json which contains data as follows: { "articles": [ { "id": 1, "title": "a" } ] } Now, I have written a script to decode this JSON file: <?php include "inc/header. ...

What is the highest value that AutoCompleteExtender can reach?

I am currently using an AutoCompleteExtender in my code with the following configuration: <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoCompleteOrigem" TargetControlID="txtClienteOrigem" ServicePath="~/Cliente/Au ...

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

React has disabled the input, causing SCSS to struggle to interpret the data

There is a React component with a checkbox that becomes disabled under certain conditions. The disabled function in React is functioning correctly, but the SCSS is unable to apply the disabled properties because the disabled attribute is not rendered in t ...

The website is displaying a "404 Error" for the font file at the specified path "GET

The fonts seem to be missing on my newly created website. What could be causing this issue? C:\Users\Berk\Desktop\twitter_video_downloader - Kopya │ ├── app.py │ ├── templates │ └── index.html │ ├── sta ...

Using Python and Selenium to upload files without utilizing an 'input' HTML element

Struggling to upload a file for Python Selenium? The send_keys method seems to be causing an issue as it returns a 'Message: element not interactable' error. This is likely because the upload button lacks an 'input' in its html code, pr ...

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

I noticed a random gap between the elements with no discernible explanation

<div id="colorscheme"> </div> <div id="content"> <div id="display_saved"> TEXT TEXT TEXT </div> Here is the HTML structure related to a particular document issue. CSS: #colorscheme{ width:25%; display:inline-blo ...

Unable to retrieve data-id from <td> on click event

Can someone help with an issue I'm having in my code? Here is the snippet where I create a table data element: html += "<td data-id='test' class='journal' style='max-width:200px;'>"+record.source_account_code+"& ...

Persist the current scroll position of a div in local storage using React

Despite the numerous questions I've come across on this topic, none of them align with my approach. Most solutions involve window scrolling, but I have a div containing overflow items that I want to retain the user's scroll position for. My attem ...

Query the database and retrieve data using the POST method in PHP

Using the following SQL query in a link to extract information from a database <div class="nav-laptop"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' ORDER BY Proizvodac Asc;">L ...

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Struggling to extract the names and addresses of attractions from TripAdvisor using web scraping. The suspicion is that there might be an issue with how product.css(...) is written (possibly related to jsons?). Seeking guidance on correcting the code in o ...

What could be causing my HTML element to vanish once the animation is complete?

I have successfully implemented an animation on 3 HTML elements for a landing page I am currently developing. The animations are working as intended, but I am facing an issue where the two lower elements (an h1 tag and a button) briefly appear on the page ...

PHP is unable to match a CAPTCHA code with the string entered by the user

I've developed a login system along with a CAPTCHA string that randomly generates characters in the form A1B2C3, containing uppercase and lowercase letters. Below is the code snippet: $cArr1 = array_merge(range("a", "z"), range("A", "Z")); $cArr2 = r ...

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

When utilizing Twitter Bootstrap, the validation classes like has-error or has-warning must be added to the wrapping form-group element to style both the input and its label. However, Knockout-Validation directly adds the class to the input element itself. ...

Unusual sidebar scrolling issues experienced in Firefox

Currently, I am in the process of developing an app with a scrolling sidebar. However, there seems to be some unexpected behavior when using Firefox: the content within the sidebar disappears partially below the top of the div if the mouse is positioned lo ...

Retrieve data from the database and automatically populate all text fields when the dropdown value is modified

I need assistance with populating all textbox values based on the dropdown selection. The dropdown values are fetched using an SQL query. Here is the HTML Code: <select name="name" ID="name" class="form-control"> <opt ...

The importance of blending classes versus isolating classes in CSS selectors

Could somebody please direct me to the CSS hierarchy rules concerning "concatenated classes" versus "separated classes"? Furthermore, what are the correct terms for "concatenated classes" versus "separated classes" (I suspect that is why the documentation ...

The React Component in Next.js does not come equipped with CSS Module functionality

I have been attempting to incorporate and apply CSS styles from a module to a React component, but the styles are not being applied, and the CSS is not being included at all. Here is the current code snippet: ./components/Toolbar.tsx import styles from & ...

Ways to eliminate excess space at the top of a page while utilizing float elements

After doing some research online, I've come across advice on how to remove the space at the top of a web page which usually involves setting the margin and padding of the body element to 0: body { margin: 0; padding: 0; } You can find more i ...