Tarja superior com informação

Layout
1

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

tarja superior
tarja superior1366×768 184 KB

tarja superior mobile
tarja superior mobile1366×768 145 KB

2

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> );
});

tarja superior dsktop
tarja superior dsktop1366×768 72.7 KB

3

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;
}
}

tarja superior mobile
tarja superior mobile1366×768 167 KB

4

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*/
5

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

6

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;
}
}
7 
/*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;
    }
}

image
image1170×446 111 KB

8

É exatamente isso Leonardo, me salvou mais uma vez

9

Valeu Teus deu certo com o código do Leonardo

10

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>');
});
12

Valeu Leonardo muito obrigado mais uma vez

13

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.

WhatsApp Image 2024-05-16 at 7.59.31 PM
WhatsApp Image 2024-05-16 at 7.59.31 PM1438×1084 78.2 KB

14

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

15

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!