4

Estou tentando deixar um menu com uma cor específica e não estou conseguindo, já alterei o efeito hover mas quando o mouse não está posicionado gostaria que todo o menu ficasse a cor #e70781 e não somente no hover, o CSS que tenho é esse:

.menu_block {
    height:60px;
    background-color:#fff;
}
.is-sticky .menu_block {
    z-index:9000;
    left:0;
    width:100%;
    box-shadow:0 1px 0 #e9e9e9;
}

.menu_toggler {display:none;}

.navmenu {float:right;}
.navmenu li {
    position:relative;
    display:inline-block;
    margin:0 0 0 -3px;
}
.navmenu li.sub-menu:hover {
    background: #e70781; /* Old browsers */
    background: -moz-linear-gradient(top, #e70781 0%, #e70781 90%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e70781), color-stop(90%,#e70781)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e70781 0%,#e70781 90%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e70781 0%,#e70781 90%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e70781 0%,#e70781 90%); /* IE10+ */
    background: linear-gradient(to bottom, #e70781 0%,#e70781 90%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e70781', endColorstr='#e70781',GradientType=0 ); /* IE6-9 */
}
.navmenu li.sub-menu:hover:before {
    content:'';
    position:absolute;
    z-index:9999;
    left:0;
    right:0;
    bottom:-2px;
    height:3px;
    background-color:#fff;
}

.navmenu li a {
    position:relative;
    display:block;
    margin:0;
    padding:20px 16px;
    text-transform:uppercase;
    font-weight:900;
    line-height:20px;
    font-size:13px;
    color:#333;
    transition: none;
    -webkit-transition: none;
}
.navmenu li.sale_menu a {
    color:#cc3333;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navmenu li.sale_menu a:before, .navmenu li.sale_menu a:after {display:none;}

.navmenu li:hover a,
.navmenu li.active a {
    margin-left:-1px;
    margin-right:-1px;
    border-left:1px solid #e9e9e9;
    border-right:1px solid #e9e9e9;
}
.navmenu li:hover a:before,
.navmenu li.active a:before,
.navmenu li:hover a:after,
.navmenu li.active a:after {
    content:'';
    position:absolute;
    left:-1px;
    right:-1px;
    top:-2px;
    height:2px;
    background-color:#333;
}
.navmenu li:hover a:after, .navmenu li.active a:after {top:auto; bottom:-2px;}

.navmenu li.sale_menu:hover a,
.navmenu li.sale_menu.active a {
    margin:0;
    border:0;
    color:#fff;
    background-color:#cc3333;
}

O que preciso mudar é somente esse menu, já consegui alterar a cor do menu em toda a sua extensão, fazendo isso:

.menu_block {
    height:60px;
    background-color:#fff;
}

Mas preciso que fiquem com a cor específica só onde tem opções no menu, menos a opção cesta e busca.

inserir a descrição da imagem aqui

Deixo o site para consulta aqui: Site em desenvolvimento

5
  • Acho que eu não entendi direito, vc quer que o menu fique rosa, mas ao passar o mouse fique como na última imagem, mais branco? Ou vc que que quando clique em algum item do menu ele fique rosa?
    – hugocsl
    Commented 20/09/2018 às 19:28
  • Olá @hugocsl, ao passar o mouse ficar rosa e quando não estiver posicionada também, hoje fica branco. Commented 20/09/2018 às 19:31
  • Não sei se é isso que vc precisa, mas dessa forma ele fica todo rosa... Menos o LI que tiver com a classe .active... o ativo sem cor de BG li.sub-menu.active { background: transparent;} o restante do menu com cor de BG .navmenu li.sub-menu { background: linear-gradient(to bottom, #e70781 0%,#e70781 90%); } veja como fica na imagem imgur.com/VM7Y6CI
    – hugocsl
    Commented 21/09/2018 às 11:09
  • Olá @hugocsl, será que tem como postar como uma resposta? Valeu pela grande ajuda. Commented 21/09/2018 às 11:52
  • Legal que deu certo! Valeu a força!
    – hugocsl
    Commented 21/09/2018 às 11:55

1 Resposta 1

5

Pelo que eu entendo analisando o código do link do projeto parece vc tem que trabalhar como essas classe li.sub-menu.active e .navmenu li.sub-menu de forma que seu CSS fique assim:

li.sub-menu.active { 
    background: transparent;
} 
.navmenu li.sub-menu { 
    background: linear-gradient(to bottom, #e70781 0%,#e70781 90%); 
}

Veja o resultado na imagem:

inserir a descrição da imagem aqui

4
  • Sei que já é pedir demais e não está no escopo da pergunta, sou um zero em css, tem como esse menu ficar centralizado? Commented 21/09/2018 às 11:58
  • Cara fiz uns testes aqui e da para centralizar sim, mas vc vai ter que fazer uns ajustes fines e talvez até tratar com media querys @media.... No container que está seu menu dentro vc tem que coloca element.style { display: flex; justify-content: center; flex-direction: row-reverse; } Mas como falei vc pode precisa de ajustes finos... Na imagem fica assim: imgur.com/VmLydc6
    – hugocsl
    Commented 21/09/2018 às 12:13
  • Entendi, ao alterar a resolução para celular o menu some Commented 21/09/2018 às 12:15
  • @adventistapr tipo isso, por isso que vc tem que usar esse flex só para telas largas e grandes, quando for pra tela pequena vc remove o estilo. vc pode usar tipo @media only screen and (min-width: 1180px) { css } e colocar o seu CSS, ai ele só fica valendo se a tela tiver no mínimo 1180px de largura, se for menos que isso o css da regra não é aplicado
    – hugocsl
    Commented 21/09/2018 às 12:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .