How to put it right in the header?

Question

How to put it right in the header?

Navigation

#1 by (5 votes)
#2 by (1 votes)
#3 by (1 votes)

3

I have a site where I use two headers to show my options to the user, but I came across a problem, I need to put the company logo and I can not do it, I need the logo to be in a proportional size to the header if I put it in the first one or in the second one the logo gets small.

I tried to create a structure, but my knowledge of CSS did not help much, I tried something like this:

<style>
.Geral {
    height:120px;

}

#logo {
    float: left;
    width: 220px;
    height: 120px;
    cursor: pointer;
    cursor: hand;
    background-image:url(images/anc.fw.png);
    background-repeat: no-repeat;
}
#superior {
    float: left;
    width: 1005px;
    height: 60px;
}
#inferior {
    float: left;
    width: 1005px;
    height: 60px;

}

</style>

Speaking may be that I can not exemplify what I need, so I'll make an image available.

The site is this and what I tried to do was this:

html css

asked by anonymous 13.11.2015 / 12:40

3 answers

5

Try this solution here:

<header class="clearfix">
    <div class="logo" style="
    background-color: #59218D;
    width: 20%;
    height: 100%;
    position: absolute;
    float: left;
    z-index: 10000;
">

  </div>
    <div class="navbar navbar-default navbar-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MenuUm"> <i class="icon-menu-1"></i> </button>
          <!-- <a class="navbar-brand" href="index.html"><img alt="" src="images/anc.fw.png"></a> --> 
        </div>
        <div class="navbar-collapse collapse" id="MenuUm">
          <div class="search-side" style="margin-top: 0px;"> <a href="#" class="show-search"><i class="icon-search-1"></i></a>
            <div class="search-form">
              <form autocomplete="off" role="search" method="get" class="searchform" action="#">
                <input type="text" value="" name="s" id="s" placeholder="Buscar...">
              </form>
            </div>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li> <a href="catalogos.php" style="padding-top: 28px; padding-bottom: 28px;">catálogos e manuais</a> </li>
            <li> <a href="cores.php" style="padding-top: 28px; padding-bottom: 28px;">cores e linha</a> </li>
            <li> <a href="garantia.php" style="padding-top: 28px; padding-bottom: 28px;">garantia e uso</a> </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="navbar navbar-default navbar-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MenuDois"> <i class="icon-menu-1"></i> </button>
        </div>
        <div class="navbar-collapse collapse" id="MenuDois"> 
          <!-- Início da Lista de Navegação-->
          <ul class="nav navbar-nav navbar-right">
            <li> <a href="index.php" style="padding-top: 28px; padding-bottom: 28px;">INÍCIO</a> </li>
            <li> <a href="empresa.php" style="padding-top: 28px; padding-bottom: 28px;">EMPRESA</a> </li>
            <li> <a href="produtos.php" style="padding-top: 28px; padding-bottom: 28px;">PRODUTOS</a> </li>
            <li> <a href="representantes.php" style="padding-top: 28px; padding-bottom: 28px;">REPRESENTANTES</a> </li>
            <li> <a href="encontrar.php" style="padding-top: 28px; padding-bottom: 28px;">ONDE ENCONTRAR</a> </li>
            <li><a href="contato.php" style="padding-top: 28px; padding-bottom: 28px;">CONTATO</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

It looks like this:

In the case I used a color to demonstrate, but only change for an image.

Explanation:

I created a new div to allocate the image with a backgroud.
I used z-index to leave the image above the other two divs.
With Position: Absolute I left it static in position.

Note:

Non responsive it needs some adjustments, but few adjustments. You can make the logo stay up the navbar in the responsive, I believe it would be the best solution.

Replace the entire header with this code.

13.11.2015 / 15:44

1

Now that I've noticed that it's a duplicate issue, then I'm going to migrate my answer here as this topic is more developed.

Another way to get the result would be:

First of all, if you plan to leave your reponsivo work, that is, accessible, it is not recommended to use a fixed amount of% as you did in width divs , #logo and #superior , because when the website is accessed in mobile, it will have a horizontal scroll. Use% instead.

As for your own doubt, the idea is that you create a block to store all the content. So, top and bottom menu.

Inside it you will also have 2 sub blocks to store, with 1 for the logo and another for the 2 menus. Then just divide the 2 menus with 100% width within the menu-only block.

So you do not create dependency of #inferior or between the different contents (menu and logo).

I've done an example that works with the general idea of this, take a look and see if it solves your problem: link

14.11.2015 / 12:01

Loop in function by calling itself foreach php inside script

score 1 · Accepted Answer

You can leave your header and only position #logo , #superior , #inferior within header .

header, div {
  box-sizing: border-box;
}

header {
  position: relative;
  width: 1220px;
  max-width: 90%;
  height: 120px;
  top: 0px;
  right: 0px;
  left: 0px;
  margin: 0px auto;
  
}

#logo {
  position: absolute;
  width: 120px;
  top: 0px;  
  bottom: 0px;
  left: 0px;
  
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
}

#superior {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 60px;
  left: 120px;
  
  border: 1px solid green;
  background-color: rgba(0, 255, 0, 0.1);
}

#inferior {
  position: absolute;
  top: 60px;
  right: 0px;
  bottom: 0px;
  left: 120px;   
  
  border: 1px solid blue;
  background-color: rgba(0, 0, 255, 0.1);
}


#superior, #inferior {
  text-align: right;
  line-height: 40px;
  padding: 10px;
}

<header>
  <div id="logo"></div>
  <div id="superior">
    Superior
  </div>
  <div id="inferior">
    Inferior
  </div>
</header>

I took the liberty to apply some changes to the style of your page using Developer Tools of Opera, follow the image of the window of the same already with the changes applied:

I deleted div.hidden-header , because since it has a height fixed, it was pushing header.clearfix down ... if you prefer, you can simply remove the height of div.hidden-header or apply position: absolute to header.clearfix .

Finally, I've added a div#logo your logo should stay inside it, and the value of width of div#logo , left of div.nav-top:nth-child(0) , and left of div.nav-top:nth-child(1) should be equal, preferably use the width of the logo image.