[AJUDA no LAYOUT] Alguém poderia ajudar nisso?

Alguém poderia me ajudar a deixar o cabeçalho da minha loja assim e com o mesmo menu flutuante? Gostei muito do identifique-se em cima da barra de busca e com essas outras informações em cima também. Achei bem bacana o minha conta daquela forma na lateral direita e o carrinho pequeno. Se alguém conseguir deixar pelo menos parecido eu agradeceria.

O menu com essas imagens acima também, não precisa de imagem dentro da categoria.

Esse cabeçalho está nessa loja: http://temporario-comprashop.lojaintegrada.com.br/
Minha loja: www.hfgames.com.br

Esses são os códigos que estou utilizando na minha loja: pastebin.com/u/HFGAMES

Obrigado.

Muito bom, gostaria de saber tembém !

Como você deixou o buscador e o carrinho com as margens arredondadas?

1 Curtida

@Janaeldo esses são os códigos que uso na minha loja http://pastebin.com/u/HFGAMES

@Janaeldo

/* Buscar - Carinho Arredondado */

#cabecalho .busca { padding: 0; border: none; background: transparent; }
#cabecalho .busca input { padding: 10px 5px 10px 15px; border-radius: 10px; }
#cabecalho .busca .botao-busca { height: 42px; top: 0; right: 0; border-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; width: 55px; font-size: 18px; }
.acoes-conta>li i { border-radius: 5px; }
.carrinho { border-radius: 10px; }
.carrinho>a i { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
2 Curtidas

Fiz isso no meu, gostei!
porem ficou com cor diferente nas quinas, como arrumar isso?
http://selvashop-manutencao.lojaintegrada.com.br/

@ADMDIGITALTR Bacana esse detalhe arredondado. Deu certinho aqui.

legal @Janaeldo
só usar esse link né, mas onde coloco. em ccs , html ?
#cabecalho .busca { padding: 0; border: none; background: transparent; }
#cabecalho .busca input { padding: 10px 5px 10px 15px; border-radius: 10px; }
#cabecalho .busca .botao-busca { height: 42px; top: 0; right: 0; border-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; width: 55px; font-size: 18px; }
.acoes-conta>li i { border-radius: 5px; }
.carrinho { border-radius: 10px; }
.carrinho>a i { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

Consegui, colei lá e deu tudo certo. alguém tem alguma dica pra minha loja, to achando muito simples, ahh e vou colocar mais produtos ainda ?

Deu certo. :slight_smile:

Como tirar a palavra carrinho e deixar apenas o ícone?
Gostaria de deixar apenas “Minha Conta” ao lado do ícone, cortando o “Meus Pedidos”.
Ps: Essas alterações entram automaticamente na versão mobile?

Obrigado.