Tarja superior com informação

Olá, Gostaria de colocar uma tarja acima do cabeçalho igual na imagem tanto no desktop quanto no mobile se alguem puder me ajudar agradeço


Consegui com este cod javascript por no desktop mas ainda falta nao aparece no mobile

$(document).ready(function() {
$(‘body’).prepend( <div style="margin: auto 0; background-color: #222222; padding: 10px 0"> <p style="color: #fff; text-align: center; margin: 0;">SEU TEXTO AQUI</p> </div> );
});

Com este codigo inseriu a tarja mas gostaria que ela ficasse acima de tudo na parte azul da figura

/*tarja no mobile */
@media(max-width:767px){
#cabecalho:before {
content: ‘Frete Grátis’;
display: block;
background: #ff0000;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-size: 20px;
}
}

Basta colocar

position: relative;
top: -100px /*altera o número até ficar na posição correta, se não conseguir usa ele negativo, no caso -100px*/

Desculpe Teus mas sou pouco experiente coloco este codigo junto ao que já está ou a parte se você puder me passar com fica o codigo inteiro agradeço

Basta alterar o “top: 100px”, altera o 100 para o valor que melhor se enquadrar. Caso não funcione utilize um valor negativo “-100px”

/*tarja no mobile */
@media(max-width:767px){
#cabecalho:before {
content: ‘Frete Grátis’;
display: block;
background: #ff0000;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-size: 20px;
position: relative;
top: -100x;
}
}
/*tarja no mobile */
@media(max-width:767px){
    .atalhos-mobile.visible-phone.fundo-secundario.borda-principal:before {
        content: 'Frete Grátis';
        display: block;
        background: #ff0000;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        font-size: 20px;
    }
}

2 curtidas

É exatamente isso Leonardo, me salvou mais uma vez

1 curtida

Valeu Teus deu certo com o código do Leonardo

1 curtida

Código Acertado / Formatado - para DeskTop

$(document).ready(function() {
$('body').prepend('<div style="margin: auto 0; background-color: #222222; padding: 10px 0"> <p style="color: #fff; text-align: center; margin: 0;">SEU TEXTO AQUI</p> </div>');
});
1 curtida

Valeu Leonardo muito obrigado mais uma vez

1 curtida

Olá Leonardo, tudo bem?

Coloquei seu código para mobile, porém a barra de opções ficou desalinhada.
Teria como corrigir??
Segue foto de como esta ficando.

CSS

@media screen and (max-width: 767px) {
    .atalhos-mobile>ul {
        margin-top: -3px;
    }
    #cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li.fundo-principal > a {
        margin: 0px 0;
    }
}

image

1 curtida

Leonardo muito obrigado. Ficou perfeito! Agora vou atrás de arrumar esse layout que esta estranho na barra de pesquisa e o nome do produto que esta muito afastado da foto no mobile.

Valeu!