How to fix content to the right inside a navbar?

Asked

Viewed 971 times

0

I’m developing a website and I need to leave a lead pickup fixed on top, along with the top menu, to the button direct (as shown in the image).Imagem ilustrativa do exemplo de menu

.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>
        <div class="box-btn-menu">
            <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/img-btn.png"/>
            <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/img-btn.png"/>
            <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-email.png"/>
            <div class="cata-lead pull-right"></div>
        </div>
    </div>
</div>
</body>
</html>

html css

  • A technique to fix an element in relation to its parent element is demonstrated [in this Pen](https://codepen.io/Maujor/pen/dzNdKe?editors=1100/ "Pen by Maujor"). I hope you can adapt to your case.

2 answers

0

I made a quick example, see if it is this and adapt as you want, in case there are any questions just warn.

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>

  • It’s similar to this, but the red box you made would need to be aligned to the right of the buttons and how I’m doing it is left.

  • In my example only you modify the 'right'

  • The problem is that I’m putting the rigth: 0px and it gets fixed on the side, but I want it to stay fixed to the direct in the container; at the maximum size of the container.

  • It’s hard to understand, and your code is not as you’re saying, it’s really complicated, put your current code so I can work on it.

  • My code is like this. I stopped modifying it because I wasn’t getting it. Let me see if I can explain it better. The image I posted illustrates well what I want to happen. Let it be below the buttons, which in this case are like <div>, and aligned to the right of the last button. When I increase and decrease the width of the page it has to be always aligned to the button and not with a fixed right.

0


I managed to solve the problem at the end of last Friday night. The solution was similar to what Mauritius posted in the comments, with some differences.
I set the menu to the top this way
<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 proper margin to the cata-lead, staying 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>
    <div class="col-md-15">
        <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-telefone.png">
        <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-whats-app.png">
        <img class="btn-menu" src="http://unifacex.com.br/wp-content/uploads/2017/08/btn-email.png">
        <form class="cata-lead">
            <div class="lp-titulo">
                Preencha este formulário e garanta seu futuro entre os <obs>melhores</obs>.
            </div>
        </form>
    </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.