Alteração no Menu

Detalhes da questão

Endereço do fórum: https://dotsystem.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Boa tarde, bem estava testando um negócio aqui e em meu novo menu tem algum erro, basicamente quando altero a cor para BRANCA ele não tem fundo escurinho, veja como está e como eu quero.

Como está:


Como quero:


Observe que tem um fundo na imagem um pouquinho escura, tinha sombra, eu gostaria de colocar desse jeito.

Essa é a parte do menu ( se não for mando o CSS inteiro, ou template ).

Código:

        /*--- MENU ---*/
        .menu {
            width: 100%;
            position: fixed;
            top: 0;
            background-color: #fafafa;
            box-shadow: inset rgba(0, 0, 20) 0px -2px 0px;
            height: 70px;
            z-index: 999;
        }
       
        .menu .menu-container {
            width: 95%;
            margin: 0 auto;
        }
       
        /*-- Links do menu --*/
        .menu .menu-container .menu-link-wrapper {
            width: 40%;
            float: left;
        }
       
        .menu-link-wrapper .menu-link {
            background-color: rgba(190, 190, 190, 0.05);
            position: relative;
            display: inline-block;
            margin-right: 6px;
            width: 70px;
            height: 70px;
            cursor: pointer;
        }
       
        .menu-link-wrapper .menu-link .icon {
            width: 100%;
            filter: grayscale(100%);
            height: 70px;
            background-position: center;
            background-repeat: no-repeat;
        }
       
        .menu-link-wrapper .menu-link:hover .icon { filter: grayscale(0%); }
       
        .menu-link-wrapper .menu-link .icon.forum { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/cia10.png); }
        .menu-link-wrapper .menu-link .icon.portal { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/medalh10.gif); }
        .menu-link-wrapper .menu-link .icon.membros { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/emblem10.gif); }
        .menu-link-wrapper .menu-link .icon.grupos { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/grupos11.gif); }
        .menu-link-wrapper .menu-link .icon.medalha { background-image: url(https://4.bp.blogspot.com/-Gilkz4TaSBU/Wc13EYUEyWI/AAAAAAAA-hc/9cPgN7U-2SEkOiJpfWGiRnvUXD87iU73QCKgBGAs/s1600/IT434.gif); }
       
        .menu-link-wrapper .menu-link .text {
            border: 1px solid  #ffffff;
            border-radius: 4px;
            background-color:  #AA0000;
            box-shadow: 0 0 2px 1px rgba(255,255,255,.3) inset, 0 3px 9px rgba(0,0,0,.18);
            font-weight: 700;
            font-size: 1.3rem;
            line-height: 25px;
            color: #fff;
            position: absolute;
            bottom: -30px;
            left: -5px;
            z-index: 2;
            width: calc(100% + 5px + 5px);
            height: 28px;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 0 1px 0 rgba(0,0,0,.18);
            opacity: 0;
            -webkit-transition: .3s opacity;
            -moz-transition: .3s opacity;
            transition: .3s opacity;
        }
       
        .menu-link-wrapper .menu-link:hover .text {
            opacity: 1;
            -webkit-transition: .3s opacity;
            -moz-transition: .3s opacity;
            transition: .3s opacity;
        }
       
        .menu-link-wrapper .menu-link .text:after {
            position: absolute;
            top: -8px;
            left: calc(50% - 7px);
            content: '';
            -webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
            filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
            height: 0;
            width: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #545454;
        }
       

Olá @ElProfessor,

Você tem certeza que informou o fórum correto? O fórum apresentado não possui as características ditas por você.

Chanp

Ah perdão, estou testando em outro fórum o navegador para depois colocar nesse fórum, vou mandar o certo forumvazio.forumeiros.com

Certo.

Basta substituir o código passado acima por este:

Código:

        /*--- MENU ---*/
        .menu {
            width: 100%;
            position: fixed;
            top: 0;
            background-color: #fafafa;
            box-shadow: inset rgba(0, 0, 20) 0px -2px 0px;
            height: 70px;
            z-index: 999;
        }
     
        .menu .menu-container {
            width: 95%;
            margin: 0 auto;
        }
     
        /*-- Links do menu --*/
        .menu .menu-container .menu-link-wrapper {
            width: 40%;
            float: left;
        }
     
        .menu-link-wrapper .menu-link {
            background-color: rgba(190, 190, 190, 0.3);
            position: relative;
            display: inline-block;
            margin-right: 6px;
            width: 70px;
            height: 70px;
            cursor: pointer;
        }
     
        .menu-link-wrapper .menu-link .icon {
            width: 100%;
            filter: grayscale(100%);
            height: 70px;
            background-position: center;
            background-repeat: no-repeat;
        }
     
        .menu-link-wrapper .menu-link:hover .icon { filter: grayscale(0%); }
     
        .menu-link-wrapper .menu-link .icon.forum { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/cia10.png); }
        .menu-link-wrapper .menu-link .icon.portal { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/medalh10.gif); }
        .menu-link-wrapper .menu-link .icon.membros { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/emblem10.gif); }
        .menu-link-wrapper .menu-link .icon.grupos { background-image: url(https://i.servimg.com/u/f58/19/77/81/62/grupos11.gif); }
        .menu-link-wrapper .menu-link .icon.medalha { background-image: url(https://4.bp.blogspot.com/-Gilkz4TaSBU/Wc13EYUEyWI/AAAAAAAA-hc/9cPgN7U-2SEkOiJpfWGiRnvUXD87iU73QCKgBGAs/s1600/IT434.gif); }
     
        .menu-link-wrapper .menu-link .text {
            border: 1px solid  #ffffff;
            border-radius: 4px;
            background-color:  #AA0000;
            box-shadow: 0 0 2px 1px rgba(255,255,255,.3) inset, 0 3px 9px rgba(0,0,0,.18);
            font-weight: 700;
            font-size: 1.3rem;
            line-height: 25px;
            color: #fff;
            position: absolute;
            bottom: -30px;
            left: -5px;
            z-index: 2;
            width: calc(100% + 5px + 5px);
            height: 28px;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 0 1px 0 rgba(0,0,0,.18);
            opacity: 0;
            -webkit-transition: .3s opacity;
            -moz-transition: .3s opacity;
            transition: .3s opacity;
        }
     
        .menu-link-wrapper .menu-link:hover .text {
            opacity: 1;
            -webkit-transition: .3s opacity;
            -moz-transition: .3s opacity;
            transition: .3s opacity;
        }
     
        .menu-link-wrapper .menu-link .text:after {
            position: absolute;
            top: -8px;
            left: calc(50% - 7px);
            content: '';
            -webkit-filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
            filter: drop-shadow(0 3px 9px rgba(0,0,0,0.18));
            height: 0;
            width: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #545454;
        }

Resolve seu problema?
Chanp

Obrigado, pode fechar. Tu é demais <3