Ajuste Cabeçalho

Layout
1

Olá pessoal, estou precisando de um help no meu cabeçalho.
Preciso que a DIV class=“menu-wrapper span6 hidden-phone”, fique ajustada a direita no cabeçalho. Já tentei algumas coisas porém sem sucesso.

Sem título
Sem título1341×146 10.2 KB

Essa é ideia… Conto com o grande conhecimento de vcs.

https://www.loversacessorios.com.br/

2

minha real intenção é que fique nesse formato:

image
image1894×206 12.9 KB

Mas não consegui ainda, quem puder me ajudar ai … agradeço muito.

@math estou lhe marcando para ver se me ajuda nessa ai irmão… obrigado desde já

2 curtidas
3

Olá @Mauricio_Pereira!!

Segue o CSS que fiz:

@media (min-width: 768px) {
    #cabecalho .conteiner {
        max-width: 100%;
        padding: 0 30px; /* Pode-se optar por aumentar ou diminuir os espaços laterais */
    }

    #cabecalho .conteiner .row-fluid .span3,
    #cabecalho .conteiner .row-fluid .span9 {
        width: calc(100% / 3); /* width: 33.333333%; */
    }

    #cabecalho .conteiner .row-fluid .span3 {
        display: flex;
        justify-content: center;
        order: 1;
    }

    #cabecalho .conteiner .row-fluid .span9 {
        margin-left: 0;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior {
        justify-content: flex-start;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .busca-mobile {
        width: 75%; /* Escolher a largura da busca */
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .busca-mobile .busca {
        left: 0;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .menu-wrapper {
        position: absolute;
        right: -156px; /* Largura fixa utilizada na sacola */
        width: 25%;
    }
}

Espero ter ajudado, até mais!!

2 curtidas
4

Bom dia @math meu irmão a solução foi perfeita… ficou sensacional… parabéns amigo… muito obrigado mesmo… abraço irmão.

2 curtidas
5

@math testei aqui inserindo um produto no carrinho e está cortando um pouco quando mostra o box.

image
image1892×422 116 KB

Consegue dar uma olhada para mim nisso Matheus? obrigado mais uma vez irmão

2 curtidas
6

Bom dia @Mauricio_Pereira!!

Imagina, que bom que te ajudou!!

Acredito que adicionando esse último estilo, vai ficar legal:

@media (min-width: 768px) {
    #cabecalho .conteiner {
        max-width: 100%;
        padding: 0 30px; /* Pode-se optar por aumentar ou diminuir os espaços laterais */
    }

    #cabecalho .conteiner .row-fluid .span3,
    #cabecalho .conteiner .row-fluid .span9 {
        width: calc(100% / 3); /* width: 33.333333%; */
    }

    #cabecalho .conteiner .row-fluid .span3 {
        display: flex;
        justify-content: center;
        order: 1;
    }

    #cabecalho .conteiner .row-fluid .span9 {
        margin-left: 0;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior {
        justify-content: flex-start;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .busca-mobile {
        width: 75%; /* Escolher a largura da busca */
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .busca-mobile .busca {
        left: 0;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .menu-wrapper {
        position: absolute;
        right: -156px; /* Largura fixa utilizada na sacola */
        width: 25%;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .menu-wrapper .container-drop-help {
        left: -102px;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .menu-wrapper .my_account ul {
        left: -92px;
    }

    #cabecalho .conteiner .row-fluid .span9 .inferior .menu-wrapper .carrinho-interno {
        right: 70%;
    }
}

Espero ter ajudado, até mais.

3 curtidas
7

Excelente irmão… mais uma vez muito obrigado pela ajuda… você é fera… abraço

3 curtidas