MyBB Community Forums

How to do this Navigation bar?
[attachment=41807]

That is called avatar as drop down


here is the code you need:

The html

<div class="user-menu-wrap"><a class="mini-photo-wrapper" href="#"><img class="mini-photo" src="{$mybb->user['avatar']}" width="36" height="36"/></a>
  <div class="menu-container">
    <ul class="user-menu">
      <li class="user-menu__item"><a class="user-menu-link" href="#">My Profile</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="#">Search</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="#">Messages</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="#">Activity</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="#">Settings</a></li>
    </ul>
  </div>
</div>

The css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


ul {
  list-style: none;
}

.user-menu-wrap {
  position: relative;
  width: 36px;
  margin: 50px auto;
}

.mini-photo-wrapper {
  display: block;
}

.mini-photo {
  border-radius: 50%;
}

.menu-container {
  visibility: hidden;
  opacity: 0;
  
  &.active {
    visibility: visible;
    opacity: 1;
    transition: all .3s ease-in-out;
  }
}

.user-menu {
  position: absolute;
  right: -22px;
  background-color: #fff;
  width: 120px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 10px;
  
  .user-menu-link {
    display: block;
    text-decoration: none;
    color: #444;
    font-size: 14px;
    padding: 5px 10px;
    
    &:hover {
      background-color: #4183c4;
      color: #fff;
    }
  }
  
  &:before {
    position: absolute;
    top: -16px;
    left: 72px;
    display: inline-block;
    content: "";
    border: 8px solid transparent;
    border-bottom-color: #ccc;
    border-bottom-color: rgba(0,0,0,0.15);
  }
  
  &:after {
    position: absolute;
    top: -14px;
    left: 73px;
    display: inline-block;
    content: "";
    border: 7px solid transparent;
    border-bottom-color: #fff;
  }
}

the javascript:

document.querySelector('.mini-photo-wrapper').addEventListener('click', function() {
  document.querySelector('.menu-container').classList.toggle('active');
});

where can i put the javascript?

Wrap the script in <script></script> tags and stick it in the header include template

Not working.

Don't use nulled theme 😂