How to transform the bootstrap 4 hamburger icon into a three dots menu icon using css only

Question

How to transform the bootstrap 4 hamburger icon into a three dots menu icon using css only

The standard bootstrap 4 navigation bar button showcases a classic hamburger icon.

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

Is there a way to transform this original hamburger icon into a CSS-only three dots or kebab dots menu icon?

Below is the initial icon:

https://i.sstatic.net/Qj6uq.png

And here is the desired icon (note: colors may vary):

https://i.sstatic.net/hu2sP.png

css bootstrap-4

Answer 1

Answer №1

body {
  background:#262626;
}

input {
  visibility:hidden;
}

.menu_container {
  padding:10px;
  border:1px solid #a0a0a0;
  width:30px;
  height:30px;
  position:relative;
  border-radius:4px;
}

.line1,
.line2,
.line3 {
  width:calc(100% - 20px);
  height:3px;
  border-radius:2px;
  background:#a0a0a0;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}

.line2 {
  transform:translateY(calc(-50% + 10px));
}

.line3 {
  transform:translateY(calc(-50% - 10px));
}

.dot_menu {
  background:#e0e0e0;
  position:relative;
  height:50px;
  border:1px solid #e0e0e0;
  width:20px;
  margin:0;
  display:none;
}

input:checked + .menu_container{
  display:none;
}


input:checked + div + div {
  display:block;
}

.dot1,
.dot2,
.dot3 {
  height:9px;
  width:9px;
  background:#262626;
  border-radius:2px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

.dot2 {
  transform:translateY(calc(-50% + 13px)) translateX(-50%);
}

.dot3 {
  transform:translateY(calc(-50% - 13px)) translateX(-50%);
}

<label>
  <input type="checkbox">
<div class="menu_container">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
<div class="dot_menu">
  <div class="dot1"></div>
  <div class="dot2"></div>
  <div class="dot3"></div>
</div>
</label>

Answer 2

body {
  background:#262626;
}

input {
  visibility:hidden;
}

.menu_container {
  padding:10px;
  border:1px solid #a0a0a0;
  width:30px;
  height:30px;
  position:relative;
  border-radius:4px;
}

.line1,
.line2,
.line3 {
  width:calc(100% - 20px);
  height:3px;
  border-radius:2px;
  background:#a0a0a0;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}

.line2 {
  transform:translateY(calc(-50% + 10px));
}

.line3 {
  transform:translateY(calc(-50% - 10px));
}

.dot_menu {
  background:#e0e0e0;
  position:relative;
  height:50px;
  border:1px solid #e0e0e0;
  width:20px;
  margin:0;
  display:none;
}

input:checked + .menu_container{
  display:none;
}


input:checked + div + div {
  display:block;
}

.dot1,
.dot2,
.dot3 {
  height:9px;
  width:9px;
  background:#262626;
  border-radius:2px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

.dot2 {
  transform:translateY(calc(-50% + 13px)) translateX(-50%);
}

.dot3 {
  transform:translateY(calc(-50% - 13px)) translateX(-50%);
}

<label>
  <input type="checkbox">
<div class="menu_container">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
<div class="dot_menu">
  <div class="dot1"></div>
  <div class="dot2"></div>
  <div class="dot3"></div>
</div>
</label>

How to transform the bootstrap 4 hamburger icon into a three dots menu icon using css only

Answer №1

Similar questions

Different method for adding child elements to the DOM

Horizontal scrollbar appearing on larger screens

The selected custom button color is not appearing as intended when viewed in the

Encountered a module build failure due to the inability to resolve the 'bootstrap-sass' module, a required installation when configuring bootstrap version v3

ChartJS is exhibiting an issue within a modal or popup window where the chart is being displayed with a height

How to Easily Send Data to a Vue Bootstrap Modal Dialog with Parameters

How can I center align all images using Bootstrap?

What is the best way to distinguish elements in the same HTML using Angular Material?

Having trouble with image hover functionality on pure CSS?

Avoiding the collapse of the Bootstrap 4 navbar

Is there a way to create a row with 4 columns in a loop using Bootstrap 4?

What is preventing this DIV from stretching to the full width of its children?

JavaScript stylesheet library

Customize Link Appearance Depending on Current Section

Scrolling horizontally through content of unspecified width

Utilizing CSS to transform text with a sleek, animated writing effect

What is the best way to define relative paths for content like CSS files?

Reduced complications with mixin scopes

Struggling to implement a seamless scrolling effect using CSSTransition Group

What is the method to obtain the dimensions of the browser window using JavaScript?