The CSS hamburger icon displayed in the browser features three bars of varying heights

Looking to create a hamburger icon menu using only CSS? Check out my implementation below which includes three span tags in the HTML document.

.sidebar-toggle {
  display: inline-block;
}

.sidebar-toggle span {
  display: block;
  width: 1.5rem;
  height: 0.2rem;
  border-radius: 0.3rem;
  background-color: rgb(196, 196, 196);
  margin-top: 0.2rem;
}
<div class="container">
  <div class="sidebar-toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

The browser (Chrome and IE) may display the three bars (span tags) with different heights and margins as shown in the picture below.

Adjusting the height and margin values may fix this issue. It's possible that the browser resolution could be causing the problem.

If you're still facing issues, consider revisiting the CSS for the hamburger icon implementation. Any potential flaws might need to be addressed for optimal display.

htmlcss

Answer №1

For a more effective approach, I suggest utilizing box shadow for achieving the desired effect:

.box-shadow-effect:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}
<div class='box-shadow-effect'></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

I created a design for a subscription form that appears aesthetically pleasing in Firefox, however, it does not maintain the same appearance in Opera. Any suggestions on how I can resolve this issue?

Why does my code display differently in Firefox compared to Opera? In Firefox, the height of input/text and input/submit elements are similar. However, in Opera, the height of the input/submit is reduced. This is the HTML code: < ...

htmlcssfirefoxopera

Chrome geolocation feature does not display the permission popup for JavaScript

After the latest Chrome update, we have noticed that the popup to Allow/Block accessing a user's location from a website is no longer appearing. We tested this on Edge, Firefox, and different mobile devices, where it seems to be working fine. Current ...

javascripthtmlgoogle-chromegeolocation

Stretch element to reach the edge of the container

I need help with positioning an input and a textarea inside a container that has a height of 52.5vh. I want the textarea to start right below the input and expand all the way to the end of the container. How can I achieve this layout? Both elements should ...

htmlcss

Is it possible to convert a blob to an image file using the FileReader in HTML

client side code <head> <script> var reader = new FileReader(); var objVal; var image = new Image(); reader.onload = function(e) { document.getElementById('propertyImg').setAttribute('src', e.target.result); }; fun ...

phpjavascripthtml

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Looking to develop a text counter similar to Twitter that increases the width in green color up to 75%, then switches to yellow until 98%, and finally turns red if the input value is greater than or equal to 400. It should also add a "highlight" class when ...

javascriptjquerycss

Generating symbols that combine both images and text seamlessly

I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...

javascripthtmlcssimage

Problems with navigation alignment in Flask website due to HTML, CSS, and

Here's a snapshot of my current website design: website I'm attempting to place the Login & Sign up buttons in line with the rest of the navigation bar. I've tried various methods without success so far. My attempts include adjusting text a ...

htmlcssflask

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

cssreactjsmaterial-ui

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

javascriptjquerycssscroll

Guide to align elements (cards) side by side in a row within a container element (div)

I have a question that bears resemblance to another one found on this site. I decided to create my own version of the Material UI Card example from https://material-ui.com/demos/cards/. You can view and edit my version on the sandbox editor by clicking he ...

cssreactjsmaterial-ui

How to display text on a new line using HTML and CSS?

How can I properly display formatted text in HTML with a text string from my database? The text should be contained within a <div class="col-xs-12"> and nested inside the div, there should be a <pre> tag. When the text size exceeds the width o ...

javascriptjqueryhtmlcss

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

javascripthtmlcanvas

Conceal the HTML element within a subscription

Currently, I am utilizing Angular and have a checkbox that I need to toggle visibility based on the response of an API call subscription. The issue lies in a delay when trying to hide the checkbox (as it is initially set to visible). My assumption is that ...

htmlangulartypescriptangular-material

Problem with Angular Slider

I'm in the process of creating a carousel component in Angular, but I'm facing an issue where the carousel is not appearing as it should. Below is the code for my carousel component. carousel.component.html: <div class="carousel"> ...

htmlcssangulartypescriptslider

Utilizing the background-clip property with a gradient overlay

My Objective: My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look. Codepen: https://codepen.io/si ...

htmlcssgradientbackground-clip

Encountering a problem within a Maven project during execution

Greetings, I am relatively new to maven and seeking some assistance. Recently, my Maven project has started displaying a 404 error on the browser when I attempt to run it. I initially created this Maven project using the webapp archetype and everything w ...

htmleclipsemaventomcat7

Issue with fadeout() on absolutely positioned element loaded via AJAX in jQuery

Currently, I am utilizing AJAXify on a website project to implement page transitions and encountering some abnormal behavior with jQuery. Below is my code: HTML (I am transitioning through backgrounds using jQuery) <div id="backgrounds"> <img s ...

jquerycssajax

What is the best way to store all rows in a dynamically changing table with AngularJS?

I am facing an issue while trying to dynamically add rows for a variable that is a String array in my database. The problem is that it only saves the last value entered in the row instead of saving all of them in an array. Here is my current view code: &l ...

javascripthtmlangularjs

Issues arise when attempting to display Sphinx documentation containing SVG images on Internet Explorer 11

I have been working on building Sphinx documentation and incorporating a UML diagram generated as an SVG image using graphviz. The SVG file is embedded in the auto-generated HTML template from Sphinx. While the SVG displays perfectly fine on Chrome and Fi ...

htmlsvginternet-explorer-11python-sphinxgraphviz

Angular Pagination: Present a collection of pages formatted to the size of A4 paper

Currently, I am working on implementing pagination using NgbdPaginationBasic in my app.module.ts file. import { NgbdPaginationBasic } from './pagination-basic'; My goal is to create a series of A4 size pages with a visible Header and Footer onl ...

javascripthtmlangulartypescriptpagination