How to set content right inside a navbar?

0

I'm developing a website and need to leave a lead picker pinned to the top, along with the top menu, to the bottom of the button (as shown in the image).

.lp-menu{
        min-height: 70px;
        background-image: url('http://unifacex.com.br/wp-content/uploads/2017/08/menun-fixo.png');
        position: fixed;
        width: 100%;
    }
    .box-menu-lead{
        float: right !important;
    }
    tr > td > div.cata-lead{
        float: right !important;
    }
    .cata-lead{
        background-color: black;
        width: 340px;
        height: 540px;
        position: absolute;
    }
    .box-btn-menu{
        margin: 12px 0px 12px 0px;
        float: right !important;
    }
    img.btn-menu{
        margin: 0;
        padding: 0;
        float: left;
    }
    img.btn-menu:hover{
        box-shadow: 6px 6px 10px rgba(0,0,0,0.8);
    }
    .banner{
        background-image: url('http://unifacex.com.br/wp-content/uploads/2017/08/banner.png');
        width: 100%;
        height: 650px;
        background-repeat: no-repeat;
        background-position: center;
    }
    div.logo > a > img{
        height: 84px;
    }
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
<div class="lp-menu">
    <div class="container">
        <div class="pull-left">
            <div class="logo">
                <a href="http://unifacex.com.br"><img src="http://unifacex.com.br/wp-content/uploads/2017/08/logo.png"></a></div></div><divclass="box-btn-menu">
            <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/img-btn.png"/><imgclass="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/img-btn.png"/><imgclass="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-email.png"/><divclass="cata-lead pull-right"></div>
        </div>
    </div>
</div>
</body>
</html>
    
asked by anonymous 04.08.2017 / 21:50

2 answers

0

I was able to solve the problem late Friday night. The solution was similar to what Mauricio posted in the comments, with some differences. Home I set the menu to the top of this form
<div class="lp-menu"></div>

 .lp-menu{
    height: 84px;
    background-image: url('http://meusite.com.br/wp-content/uploads/2017/08/topo.png');
    position: fixed;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
}

And then I put the rest of my code on top, giving the right margin to the lead-cat, getting this way

<div class="col-md-30">
    <div class="col-md-15">
        <div class="logo">
            <a href="http://unifacex.com.br">
                <img src="http://unifacex.com.br/wp-content/uploads/2017/08/logo.png"></a></div></div><divclass="col-md-15">
        <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-telefone.png"><imgclass="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-whats-app.png"><imgclass="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-email.png"><formclass="cata-lead">
            <div class="lp-titulo">
                Preencha este formulário e garanta seu futuro entre os <obs>melhores</obs>.
            </div>
        </form>
    </div>
</div>

    
07.08.2017 / 15:22
0

I made a quick example, see if it is that and adapt as you want, if there is any doubt, just let me know.

body{
  padding: 0;
  margin: 0;
}

header{
  float:left;
  width: 100%;
  height: 50px;
  background: #000;
  position: fixed;
}

.coluna-fixa{
  height: 150px;
  width: 100px;
  position: fixed;
  background: red;
  right: 10px;
  top: 55px;
}

section{
  height: 600px;
}
<header>
</header>
<div class="coluna-fixa">
</div>
<section>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</section>
    
04.08.2017 / 21:58