Personalizar cabeçalho

Detalhes da questão

Descrição

Spoiler:

Código:

div#primary_nav {
  background: rgba(255,255,255,0.1) url(http://i.imgur.com/CcLIuMn.png) repeat 50% 50%;
  box-shadow: inset rgba(255,255,255,0.1) 0px 0px 0px 1px, inset rgba(255,255,255,0.3) 0px 1px 0px, rgba(0, 0, 0, 0.49) 0px 1px 2px;
  border-radius: 3px;
  position: relative;
  margin: 15px 0px;
  max-height: 60px;
  padding: 0px 10px;
}

div#primary_nav ul li a {
  padding: 20px;
  display: inline-block;
  font-size: 14px;
  color: rgba(255,255,255,1);
  text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  transition: all 0.15s ease-in-out;
  text-transform: uppercase;
}

div#primary_nav * {
  font-size: 0px;
}

body {
  background: #fff url(http://i.imgur.com/0B5lrds.png);
}

.pun {
  border-top: none!important;
}

div#branding {
  border-bottom: solid 2px #2ea3f2;
}

div#primary_nav ul li a:hover {
  color: rgba(255,255,255,1);
}

div#primary_nav ul li:before, div#primary_nav ul li:after {
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  left: -8px;
  right: 40px;
  background: url(http://ipsfocus.net/4x/uploads/set_resources_133/005d20f304c7929cbfdb3fe61d088022_nav-hover.png) no-repeat;
  background-position: 0 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.25s, 0.25s;
  transition-delay: 0.25s, 0s;
  transition-timing-function: ease-in-out;
  transform: scaleY(0) translate(0,0);
  transform-origin: 100% 50%;
}

div#primary_nav ul li:hover:before, div#primary_nav ul li:hover:after {
  opacity: 1;
  transform: scaleY(1) translate(0,0);
  transition-delay: 0s, 0s;
}

div#primary_nav ul li:hover {
  z-index: 98989889;
}

div#primary_nav ul li {
  vertical-align: top;
  transform: translate(0,0);
  position: relative;
}

div#primary_nav ul li:after {
  left: auto;
  right: -8px;
  width: 48px;
  background-position: 100% 50%;
  transform-origin: 0% 50%;
}

Código:

(function ($) {
  'use strict';

  $(function () {

    var $target = $('#myDropDown');
   
    var $drop = $target.after([
      '<div class="lz-dropdown-user" style="position: absolute; display: none;">',
      '  <div class="lz-avatar-wrap">',
      '    ' + _userdata["avatar"],
      '  </div>',
      '  <div class="lz-col-left">',
      '    <a href="/st/' + _userdata["username"] + '">Meu Conteúdo</a>',
      '    <a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a>',
      '    <a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos</a>',
      '  </div>',
      '  <div class="lz-col-right">',
      '    <a href="/u' + _userdata["user_id"] + '">Meu Perfil</a>',
      '    <a href="/profile?mode=editprofile&page_profil=avatars">Mudar avatar</a>',
      '    <a href="/profile?mode=editprofile&page_profil=informations">Preferências</a>',
      '  </div>',
      '</div>',
    ].join('\n'));
   
    $target.attr('style', [
      'display: none !important;',
      'visibility: hidden !important;',
      'opacity: 0 !important;',
      'pointer-events: none !important;',
    ].join(' '));

    $('#drop_link').attr('onclick', '');
    $('#drop_link').on('click', function () {
      $('.lz-dropdown-user').toggle();
    });

    $('head').append([
      '<style type="text/css">',
      '  .lz-dropdown-user {',
      '    background-color: #fff;',
      '    z-index: 9999;',
      '    width: 400px;',
      '    height: 120px;',
      '    right: 0px;',
      '    box-sizing: border-box;',
      '    border-radius: 4px;',
      '    padding: 10px;',
      '    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.63);',
      '  }',
      '',
      '  .lz-dropdown-user * {',
      '    box-sizing: border-box;',
      '  }',
      '',
      '  .lz-dropdown-user .lz-avatar-wrap img {',
      '    height: 65px;',
      '    width: 65px;',
      '    border: solid 3px #fff;',
      '    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);',
      '    margin-top: 15px;',
      '    float: left;',
      '  }',
      '',
      '  .lz-dropdown-user a {',
      '    color: #245a88!important;',
      '    font-size: 12px!important;',
      '  }',
      '',
      '  .lz-dropdown-user a:hover {',
      '    text-decoration: underline!important;',
      '  }',
      '</style>',
    ].join('\n'));
  });
}(jQuery));

Código:

.lz-avatar-wrap {
    position: absolute;
    top: 0;
    left: 15px;
}
 
.lz-dropdown-user {   
    padding-left: 85px;
    height: 95px;
}
 
.lz-dropdown-user .lz-col-left,
.lz-dropdown-user .lz-col-right {
    line-height: 1.5rem;
    width: 50%;
    box-sizing: border-box;
    float: left;
}
 
.lz-dropdown-user .lz-col-left a,
.lz-dropdown-user .lz-col-right a {
    display: block;
}

Código:

.lz-dropdown-user {
    padding-left: 80px;
    height: 96px;
}

Código:

.lz-dropdown-user {
    padding-left: 80px !important;
    height: 96px !important;
}

Código:

#user_navigation {
    overflow: visible;
}

#user_navigation > ul > li {
    position: relative;
}

.lz-dropdown-user::before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7.5px 10px 7.5px;
    border-color: transparent transparent #fff transparent;
    top: -8px;
    right: 8px;
}

Código:

#user_navigation {
    overflow: visible !important;
}