MyBB Community Forums

Full Version: Navigation bar
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
How to do this Navigation bar?
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>

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() {
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 😂