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

Storing the values of three checkboxes in individual variables to be passed into distinct columns

Below is the HTML code for checkboxes, with a function that limits only three selections: <form class="interestSearchCriteria"> <input type="checkbox" name="walking" value="Walking"> Walking <input type="checkbox" name="running" value=" ...

phpjqueryhtmlajax

How can I shift the button's location within a pop-up in Ionic 1?

enter image description here I am struggling to make the button green underneath the three other buttons. Can someone please assist me with this? Here is my code: $scope.showIntroductionPage = function(childs){ if(childs == 0){ var myPopup = $io ...

cssangularjsbuttonionic-framework

The issue in AngularJS 1.4 where the select element value is not binding due to a type mismatch

My ng-model has a value assigned to it, but it is not binding with the selected element. <select data-ng-model="myval"> <option value="? number:2 ?"></option> <option value="2" class="ng-binding">Value 1</option> <op ...

javascripthtmlangularjs

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

I am working with the following HTML code: <html> <BODY> <DIV ID="holder"> <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV> <DIV ID="main_area">BODY CONTENT GOES HERE</DIV> ...

phpcsshtml

CSS page breaks function properly in Internet Explorer 8, however, they are not functioning correctly in Firefox and Google Chrome

Help Needed: I encountered an issue where I wrote CSS to display page breaks in my HTML. It seems to work fine in Internet Explorer, but not in Firefox and Chrome. Here is the inline CSS I used: <br style="page-break-after: always;"> Below is a sni ...

asp.nethtmlcsspanelpage-break

AngularJS: intercepting custom 404 errors - handling responses containing URLs

Within my application, I have implemented an interceptor to handle any HTTP response errors. Here is a snippet of how it looks: var response = function(response) { if(response.config.url.indexOf('?page=') > -1) { skipException = true; ...

javascripthtmlangularjs

The functionality of DataTables is not supported on Internet Explorer versions 8 and below

My current setup involves using DataTables to present data in a tabular format with pagination and sorting functionalities. While this is working smoothly across all browsers, I have encountered an issue specifically in IE versions 8 and below. According t ...

jqueryhtmlcssdatatables

Turn on and off scrolling of DIV content when hovering over it

How can I create a div that automatically scrolls to the bottom on hover? I tried implementing the code below, but it doesn't work as expected. It jumps to the bottom of the div's height on first hover and transitions smoothly on second hover. . ...

javascriptjqueryhtmlcss

Error Message "Alexa.create is not a valid function" encountered while using the Alexa HTML Web API on the Echo Show 10

Here is the HTML code for my custom Alexa Skill. <head> <script src="https://cdn.myalexaskills.com/latest/alexa-html.js"> </script> </head> <body> var alexaClient; Alexa.create({version: '1.0'}) .t ...

javascripthtmlalexa-skills-kit

CSS - positioning the sidebar on the far left edge of the screen (refer to image)

Is there a way to create a layout similar to this design: For a demonstration, see here: http://jsfiddle.net/ymC82/ Current HTML code: <div class="wrapper"> <aside> Sidebar </aside> <article> ...

htmlcss

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

Struggling to keep text aligned to the left?

Check out the image at https://i.sstatic.net/Qu7hT.png in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the htt ...

htmlcsscss-position

How to locate a particular element containing specific text using xpath

I have a unique set of spans to work with: <span> <span>foobar</span> <span>textexampleone</span> </span> Currently, I am attempting to utilize xpath in order to locate the span containing "textexampleone" with ...

htmlxmlxpathselenium

Using jQuery's ajax to populate several div elements in a single call

Trying to wrap my head around jQuery's Ajax function. There exists a page composed of various divs, along with an XML document generated from a MySql resultset. Within the jQuery function displayed below, I successfully fill the titleDiv with data. M ...

phpjqueryxmlajaxhtml

Leverage the calc() function within the makeStyles method

const useStyles = makeStyles((theme) => ({ dialog: { '& .MuiTextField-root': { margin: theme.spacing(1), } }, address: { width:"calc(24vw + 8px)" }, })); <div> <TextField id="contact ...

cssreactjsmaterial-uijssinline-styles

Connecting a secret parameter to a designated radio option within a form (PHP/MySQL/HTML)

I am currently building a PHP form that connects to a MySQL database. Each question in the form requires a simple yes or no answer. The challenge I'm facing is with submitting a hidden value when the user selects 'No' for a question. This ...

phphtmlmysqlforms

Utilizing AJAX to dynamically populate an HTML list from a database and then saving the user's newly selected value back to the database

I'm working on dynamically populating a list from a database using AJAX and then updating the selected value back to the database with a servlet. What's the best approach for achieving this? Typically, I use the following code for dynamic update ...

htmlajaxjspservletsgson

There are two notable problems with Bootstrap 4 Tooltip. The first is that it appears when a button is clicked, and the second is that it shows up for disabled elements

I am currently experiencing an issue with my tooltip while using Bootstrap 4. In my index.html, I have the following script loaded: $('body').tooltip({ selector: '[data-toggle="tooltip"]', delay: { show: 550, hide: 0 } }); The proble ...

javascriptjqueryhtmlbootstrap-4tooltip

Internet Explorer 9 users experience a sudden blank page display

Are there any effective methods for diagnosing why a page suddenly becomes blank in Internet Explorer? I am aware that switching to Compatibility Mode 7 is an option, however dealing with the quirks of IE7 can be even more challenging. ...

cssinternet-explorerinternet-explorer-9