'How to CSS visibility works

I put my whole code in https://jsfiddle.net/xmbohx/kuaen74m/5/

Trying to toggle the profile picture to reveal the menu in it but cannot.

the html:

<div class="wrapper">
        <div class="header">
            <div class="header-menu">
                <div>
                    <div class="title">LOGG <span>Panel</span></div>
                </div>
                <div class="sidebar-btn">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="action" onclick="menuToggle()">
                    <img src="img2.jpg">
                    <div class="propic">
                        <h3>My name <br><span>operator</span></h3>
                        <ul>
                            <li><a href="#"><i class="fas fa-user-edit"></i><span>Edit</span></a></li>
                            <li><a href="#"><i class="fas fa-envelope"></i><span>Message</span></a></li>
                            <li><a href="#"><i class="fas fa-sliders-h"></i><span>Setting</span></a></li>
                            <li><a href="#"><i class="fas fa-question-circle"></i><span>Help</span></a></li>
                            <li><a href="#"><i class="fas fa-sign-out-alt"></i><span>Logout</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

the action class is :

.wrapper .header .header-menu .action .propic {       
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #ffffff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 1);
border-radius: 15px;
transition: 0.5s;
    
visibility: hidden;
opacity: 0;    
}
    
.wrapper .header .header-menu .action .propic. active {visibility: visible;
opacity: 1;
}

Pls advise what missing in the code

java css

Solution 1:^[1]

Your problem is coming from the fact you have a css property overflow:hidden on the node with class name action

try replacing in your html with the following :

            <div class="action" onclick="menuToggle()">
                <div id="round">
                    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
                </div>
                <div class="propic">
                    <h3>My name <br><span>operator</span></h3>
                    <ul>
                        <li><a href="#"><i class="fas fa-user-edit"></i><span>Edit</span></a></li>
                        <li><a href="#"><i class="fas fa-envelope"></i><span>Message</span></a></li>
                        <li><a href="#"><i class="fas fa-sliders-h"></i><span>Setting</span></a></li>
                        <li><a href="#"><i class="fas fa-question-circle"></i><span>Help</span></a></li>
                        <li><a href="#"><i class="fas fa-sign-out-alt"></i><span>Logout</span></a></li>
                    </ul>
                </div>
            </div>

and then modify this part of the css :

.wrapper .header .header-menu .action {
    position: relative;
    width: 34px;
    height: 34px;
    cursor: pointer;
}
.wrapper .header .header-menu .action #round {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow:hidden;
}

I nested the image in a new div, moved the overflow hidden property to this div, then it works.

fiddle

Solution 2:^[2]

Remove overflow: hidden on .action, this is preventing the children menu to be visible.

Once that is done, since the orange image is absolute positioned, it grows beyond its parent (because its width & height are 100px).

To adjust this, you can move border-radius: 50% to img & change its width & height to 34px, which is the same as .action (parent).

Edited CSS lines (in .action & img) are noted with comments below:

$(document).ready(function() {
  $(".sidebar-btn").click(function() {
    $(".wrapper").toggleClass("kollapse");
  });
});

function menuToggle() {
  const toggleMenu = document.querySelector('.propic')
  toggleMenu.classList.toggle('active')
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  background: #fff;
}

.wrapper .header {
  z-index: 1;
  background: #22242A;
  position: fixed;
  width: calc(100% - 0%);
  height: 90px;
  display: flex;
  top: 0;
}

.wrapper .header .header-menu {
  width: calc(100% - 0%);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}


/*text kiri atas*/

.wrapper .header .header-menu .title {
  color: #fff;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 900;
}

.wrapper .header .header-menu .title span {
  color: #4ccee8;
}


/*garis datar 3*/

.wrapper .header .header-menu .sidebar-btn {
  color: #fff;
  position: absolute;
  margin-left: 240px;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  transition: 0.3s;
  transition-property: color;
}

.wrapper .header .header-menu .sidebar-btn:hover {
  color: #4ccee8;
}

.wrapper .header .header-menu ul {
  display: flex;
}


/*tombol sebelah my panel*/

.wrapper .header .header-menu ul li a {
  background: #ffff;
  color: #000;
  display: block;
  margin: 0 10px;
  font-size: 18px;
  width: 34px;
  height: 34px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  transition-property: background, color;
}

.wrapper .header .header-menu ul li a:hover {
  background: #4ccee8;
  color: #fff;
}


/*************************************************************************/

.wrapper .header .header-menu .action {
  position: relative;
  width: 34px;
  height: 34px;
  cursor: pointer;
  /* removed these */
  /* border-radius: 50%; */
  /* overflow: hidden; */

}

.wrapper .header .header-menu .action img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  /* changed */
  width: 34px;
  height: 34px;
  /* added */
  border-radius: 50%;
  
}

.wrapper .header .header-menu .action .propic {
  position: absolute;
  top: 120px;
  right: -10px;
  padding: 10px 20px;
  background: #ffffff;
  width: 200px;
  box-sizing: 0 5px 25px rgba(0, 0, 0, 1);
  border-radius: 15px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

.wrapper .header .header-menu .action .propic.active {
  visibility: visible;
  opacity: 1;
}

.wrapper .header .header-menu .action .propic::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background: red;
  transform: rotate(45deg);
}

.wrapper .header .header-menu .action .propic .h3 {
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
  font-weight: 500;
  color: #555;
  line-height: 1.2em;
}

.wrapper .header .header-menu .action.propic h3 span {
  font-size: 14px;
  color: black;
  font-weight: 400;
}

.wrapper .header .header-menu .action.propic ul li {
  list-style: none;
  padding: 10px 0;
  border-top: 1px soild rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.wrapper .header .header-menu .action.propic ul li img {
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: 0.5s;
}

.wrapper .header .header-menu .action.propic ul li i {
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: 0.5s;
}

.wrapper .header .header-menu .action.propic ul li:hover img {
  opacity: 1;
}

.wrapper .header .header-menu .action.propic ul li a {
  display: inline-block;
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: 0.5s;
}

.wrapper .header .header-menu .action.propic ul li :hover a {
  color: #ff5d94;
}


/*************************************************************************/

.wrapper .sidebar {
  z-index: 1;
  background: #2f323a;
  position: fixed;
  top: 90px;
  width: 250px;
  height: calc(100% - 9%);
  transition: 0.3s;
  transition-property: width;
  overflow-y: auto;
}

.wrapper .sidebar .sidebar-menu {
  overflow: hidden;
}

.wrapper .sidebar .sidebar-menu .profile img {
  margin: 20px 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.wrapper .sidebar .sidebar-menu .profile p {
  color: #bbb;
  font-weight: 700;
  margin-bottom: 10px;
}

.wrapper .sidebar .sidebar-menu .item {
  width: 250px;
  overflow: hidden;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn {
  /**
    ini di nonaktifkan 
    display: block;
    **/
  color: #fff;
  position: relative;
  padding: 22px 15px;
  transition: 0.3s;
  transition-property: color;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn:hover {
  color: #4ccee8;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn i {
  margin-right: 20px;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn .drop-down {
  float: right;
  font-size: 12px;
  margin-top: 3px;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu {
  background: #3498d8;
  overflow: hidden;
  max-height: 0;
  transition: 0.3s;
  transition-property: background, max-height;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu a {
  display: block;
  position: relative;
  color: #fff;
  white-space: nowrap;
  font-size: 15px;
  padding: 10px;
  /*padding: 5px;
    padding : spasi_atas_bawah spasi_dari kiri
    */
  border-bottom: 1px solid #8fc5e9;
  transition: 0.3s;
  transition-property: background;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu a:hover {
  background: #55b1f0;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu i {
  padding-right: 25px;
  font-size: 15px;
}

.wrapper .sidebar .sidebar-menu .item:target .sub-menu {
  max-height: 500px;
}

.wrapper .main-container {
  width: (100% - 250px);
  margin-top: 70px;
  margin-left: 250px;
  padding: 15px;
  /*
    background: url("images/background.jpg")no-repeat;*/
  background-size: cover;
  height: 100vh;
  transition: 0.3s;
}

.wrapper.kollapse .sidebar {
  width: 70px;
}

.wrapper.kollapse .sidebar .profile img,
.wrapper.kollapse .sidebar .profile p,
.wrapper.kollapse .sidebar a span {
  display: none;
}

.wrapper.kollapse .sidebar .sidebar-menu .item .menu-btn {
  font-size: 23px;
}

.wrapper.kollapse .sidebar .sidebar-menu .item .sub-menu i {
  font-size: 38x;
  padding-left: 3px;
}

.wrapper.kollapse .main-container {
  width: (100% - 70px);
  margin-left: 70px;
}

.wrapper .main-container .card {
  background: #fff;
  padding: 15px;
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 20px;
}


/*responsive CSS*/

@media screen and (max-width:500px) {
  .wrapper .sidebar {
    width: 70px;
  }
  .wrapper .sidebar .profile img,
  .wrapper .sidebar .profile p,
  .wrapper .sidebar a span {
    display: none;
  }
  .wrapper .sidebar .sidebar-menu .item .menu-btn {
    font-size: 23px;
  }
  .wrapper.sidebar .sidebar-menu .item .sub-menu i {
    font-size: 38x;
    padding-left: 3px;
  }
  .wrapper .main-container {
    width: (100% - 70px);
    margin-left: 70px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>

<div class="wrapper">
  <div class="header">
    <div class="header-menu">
      <div>
        <div class="title">LOGG <span>Panel</span></div>
      </div>
      <div class="sidebar-btn">
        <i class="fas fa-bars"></i>
      </div>
      <div class="action" onclick="menuToggle()">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
        <div class="propic">
          <h3>My name <br><span>operator</span></h3>
          <ul>
            <li><a href="#"><i class="fas fa-user-edit"></i><span>Edit</span></a></li>
            <li><a href="#"><i class="fas fa-envelope"></i><span>Message</span></a></li>
            <li><a href="#"><i class="fas fa-sliders-h"></i><span>Setting</span></a></li>
            <li><a href="#"><i class="fas fa-question-circle"></i><span>Help</span></a></li>
            <li><a href="#"><i class="fas fa-sign-out-alt"></i><span>Logout</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Fabien Auréjac
Solution 2	Syden

'How to CSS visibility works

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]