How do I resolve the issue of unable to align the element correctly?

I am struggling to create a hamburger menu icon and align it using flexbox. Unfortunately, the icon is not aligning properly as it is going beyond the menu and the browser screen with an odd top indent.

Below is the code I have written:

* {
  margin: 0;
  padding: 0;
}

input {
  display: none;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100px;
  background: lightblue;
}

span {
  position: absolute;
  z-index: 1;
  width: 70px;
  height: 5px;
  background: #000;
  display: block;
}

span:nth-child(1) {
  top: 0px;
}
span:nth-child(2) {
  top: 30px;
}

span:nth-child(3) {
  top: 60px;
}

label {
  background: red;
  position: relative;
  display: block;
}
<div class="wrapper">
  <input type="checkbox" id="click">
  <label for="click">
    <span></span>
    <span></span>
    <span></span>
  </label>
</div>

I also noticed that the label element does not seem to be recognizing its child elements. Typically, a parent element with 

position: relative/fixed/absolute
should recognize its children with position: absolute.

What could I be missing here?

htmlcssflexboxposition

Answer №1

There are various ways to create the hamburger menu button.

Take a look at my example. Now, your <label> tag has been given specific height and width properties, allowing you to adjust the height of the lines within the <span> tags.

You can now also observe the background color set as background: red.

Furthermore, I included a rule right: 50px for the label, giving you the ability to adjust the padding accordingly.

I have highlighted all the CSS edits made.

* {
  margin: 0;
  padding: 0;
}

input {
  display: none;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100px;
  background: lightblue;
}

span {
  /*position: absolute;*/ /*remove*/
  z-index: 1;
  /*width: 70px;*/ /*remove*/
  width: 100%; /*add*/
  height: 5px;
  background: #000;
  display: block;
}

span:nth-child(1) {
  top: 0px;
}
span:nth-child(2) {
  top: 30px;
}

span:nth-child(3) {
  top: 60px;
}

label {
  background: red;
  position: relative;
  /*display: block;*/ /*remove*/
  
  display: flex; /*add*/
  flex-direction: column; /*add*/
  justify-content: space-between; /*add*/
  width: 70px; /*add*/
  height: 50px; /*add*/
  right: 50px; /*add*/
}
<div class="wrapper">
  <input type="checkbox" id="click">
  <label for="click">
    <span></span>
    <span></span>
    <span></span>
  </label>
</div>

Answer №2

To simplify things, try adjusting your hamburger menu positioning to relative and applying margin to each item.

Instead of:

  span {
  /*position: absolute;*/ /*remove*/
  z-index: 1;
  /*width: 70px;*/ /*remove*/
  width: 100%; /*add*/
  height: 5px;
  background: #000;
  display: block;
}

span:nth-child(1) {
  top: 0px;
}
span:nth-child(2) {
  top: 30px;
}

span:nth-child(3) {
  top: 60px;
}

Try this instead:

span {
    position: relative;
    margin: 30px 20px;
    z-index: 1;
    width: 70px;
    height: 5px;
    background: #000;
    display: block;
  }

This way, you won't need to individually edit each line in the hamburger menu.

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

Step-by-step guide to implementing a month and year date-picker in Mozilla Firefox

I'm looking to create input fields where users can add the month and year. I tried using the code below, but unfortunately Mozilla Firefox doesn't support it. <input type="month" id="start" name="start"> Does ...

javascripthtmlcss

Poor height parameter

I am encountering an issue with the height of the div.divB element in this code snippet: <div class="divA"> <img src="http://lorempixel.com/1000/130"/> <div class="divB"> <span>Text text</span> </div> ...

htmlcss

Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it. Here is the HTML code: <header> <nav id=& ...

htmlcss

Extract ID for Bootstrap modal display

In my project, I am using a bootstrap modal that displays various strings. The challenge I am facing involves a loop of cards, each with a distinct 'id'. When triggering the modal, I want to show the corresponding id inside the modal itself, whic ...

javascriptjqueryhtmlcsstwitter-bootstrap

When you scroll through the page, white blocks suddenly appear

After completing a website, I noticed some white blocks appearing when scrolling. You can view the site here. This issue occurs on both mobile and desktop devices during the initial load only. Could this indicate that the page has not fully loaded yet? If ...

javascriptjqueryhtmlcss

Creating a Form with Dynamic HTML when Button is Clicked

I have been working on enhancing the functionality of my website app located at , but unfortunately, I have not been successful so far. My goal is to introduce a vendor information form with just one click of a button and then enable users to add products ...

javascriptjqueryhtmlonclickdynamic-html

Exploring the implementation of a many-to-many relationship on a webpage

In the process of creating a library database and dealing with a many-to-many relationship between books and writers, I am contemplating how best to design the user interface for managing this information. When editing a book entry, selecting one or more ...

htmldatabaseuser-interfacemany-to-many

Utilizing CSS filters to add a blur effect to specific elements within an SVG

I've been attempting to use the CSS filter blur on certain elements, but for some reason it's not working as expected. Check out this example in a jsfiddle: http://jsfiddle.net/kuyraypj/ Even though I have applied the following CSS, my '.b ...

csssvg

When the text exceeds the designated block, it will be fragmented

I have always struggled with text elements not breaking when they exceed the boundaries of their parent element. I understand that setting a max-width of 100px will solve the issue, but it's not an ideal solution for me. I want the text to break only ...

htmlcss

Issue with jQuery: addClass not toggling within an IF statement

Is there a way to dynamically add the class "disable" to an anchor tag when a user selects the radio button labeled "Remove"? Currently, in the provided fiddle, the class is added as soon as the page loads. I have included code in the script that successf ...

javascriptjqueryhtml

Struggling with the elimination of bullet points in CSS navigation bars

I'm having trouble removing the bullet points from my navigation bar. I've tried using list-style-type: none and even adding !important, but it doesn't seem to work. Strangely enough, everything looks fine in Chrome, but I get an error when ...

htmlcsslistnavigation

Progress Bar Countdown Timer

I have made some progress on my project so far: http://jsfiddle.net/BgEtE/ My goal is to achieve a design similar to this: I am in need of a progress bar like the one displayed on that site, as well as the ability to show the days remaining. Additionally ...

javascripthtmlcss

Troubleshooting a Hover Problem in Firefox

Chrome is rendering the following code perfectly fine, but Firefox seems to be having trouble applying the hover effect. HTML <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> ...

htmlcssgoogle-chromefirefox

Troubleshooting the Inline-Block Problem with Jquery Image Bubble Display

Recently, I've been exploring ways to eliminate the padding that is creating space between images before they align correctly. The culprit causing the padding seems to be the display: inline-block property. While it was suggested to have all the li t ...

css

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss

Find all the child elements within a specific class using CSS

Looking for a method to effortlessly apply styles to all elements within a specific class without repeating code like this: .element-wrapper .coin-box{ margin: 10px; float: left; } .element-wrapper .platform{ margin: 10px; float: left; } .eleme ...

htmlcss

Expanding Side Panel feature in Bootstrap 4+

Attempting to create a collapsible sidebar using Bootstrap 4+. I managed to find code for Bootstrap 3.7.3 from here, but after converting it to Bootstrap 4+, the layout doesn't appear as intended. I'm not well-versed in HTML styling and would gre ...

jquerycssbootstrap-4sidebar

Creating consistent row spacing between Bootstrap 5 rows that matches the spacing in Bootstrap 4

Is it possible to adjust the site.css file in order to achieve a similar row spacing effect as Bootstrap 5 when working with existing HTML code? ...

cssbootstrap-4rowsbootstrap-5

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

csshtmltwitter-bootstraptwitter-bootstrap-3

What is the best method for creating a distinctive identifier in HTML and jQuery?

Coding in HTML: @foreach($permission->childs as $subMenu) <tr> <td>{{$subMenu -> id}}</td> <td> &nbsp; &nbsp;{{$subMenu -> display_name}}</td> <td ...

htmljquery