Image(Logo) in the menu and body of the Bootstrap site

Asked

Viewed 2,308 times

-1

I’d like your help solving a problem. I’m learning and trying to draw with Bootstrap the image below: inserir a descrição da imagem aqui

But I can’t get it to you. Here’s what’s happening: inserir a descrição da imagem aqui

I’m using so far only this code:

    <nav class="navbar  navbar-default">
        <div class="container">
            <div class="navbar-header">

                <a class="navbar-brand" href="index.html"> <img src="images/Logo.png"></a>
                <!--  <a class="navbar-brand" href="#">Project name</a> -->
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Página inicial</a></li>
                    <li><a href="#about">Download</a></li>
                    <li><a href="#contact">Sobre</a></li>
                    <li><a href="#contact">Suporte</a></li>
                    <li><a href="#contact">Termos</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>


    <div class="container text-center">
        <div class="row">
        <img src="images/intro1.png" alt="Bird">
        </div>
    </div>
css twitter-bootstrap
  • 2

    You could put the example of the code in jsfiddle, just looking at it you can only point out the absence of a div with col-Md-12 (for example) after div Row. Add a link with the fiddle and it will be easier to help you.

2 answers

0

Like you didn’t post any css I’m going to assume that the only problem is the distance of the blue banner from the header. It would not be in relation to the logo, because it must be with position Absolute in order to overlap the other elements.

With this you can increase (or set, if you haven’t done it) the header’s margin-bottom, so you can let it down more without the logo being on top.

Another solution would be to create a <div class="row"> between the header and the blue banner, and then yes, inside this div you insert the logo with a css property translate (to move the logo slightly upwards) or position:absolute to put it higher up too.

But like I said, try putting a fiddle or some css code to know how the behavior is.

-3

Try to put the image inside figure and align it normally put the images inside div to help when viewing on cell phones can try as well

Browser other questions tagged css twitter-bootstrap

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