How to fix search box on menu?

Question

How to fix search box on menu?

Asked 9 years ago

Viewed 1,558 times

0

I wanted to know how fixed search box in the menu !!

The menu designation with the box :

My code:

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 88%;
	margin-left:11.23046875%;
    text-align: left;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}

.nav ul li:hover{
    background-color: #000;
}

.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}

.nav ul li:hover ul{
    display: block;
}

.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}

.nav ul ul li {
    display: block;
}

.nav ul ul li a:hover{
    color: #fff;
}

.img-menu{
	display:none;	
}

/*-----------Config. da caixa de pesquisa------------*/

.search{
	width:130px;
	height:33px;
	top:-2px;
	right:-2px;
	outline:none;
	border:none;
	background:#222;
	color:#FFF;
	position:relative;	
	font-size:16px;
}

.btn-busca{
	width:33px;
	height:35px;
	outline:none;
	border:none;
	background:#FF7F00;
	cursor:pointer;
	top:2px;
	left:-4px;
	position:relative;
}

<div class="nav">
 <div class="img-menu"><img src="img/icn-menu.png"/></div>
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a href="#">Animes/desenhos</a>
                    </li>
                    <li><a href="#">Memes</a>
                    </li>
                    <li><a href="#">Histórias bisarras</a>
                    </li>
             </ul>
                <li> <a href="#">TI</a>
                <ul>
                    <li><a href="#">Progamção</a>
                    </li>
                    <li><a href="#">Tutorias</a>
                    </li>
              </ul>
            </li>
        </ul>
    </div>
    
 </div> 

<form class="searchbox" action="busca.html" method="get">
    <input class="search" type="text" placeholder="Buscar...">
    <button class="btn-busca"><img src="img/tb-lupa.png"/></button>
</form>

2 answers

1

In your case, you could simply put your form inside a li and align the same right.

For this you can create a class and align the right in this way:

li.right { float:right; }

Once done, simply add your search inside the li, in this way:

 <li class="right">              
     <form class="searchbox" action="busca.html" method="get">
         <input class="search" type="text" placeholder="Buscar...">
         <button class="btn-busca"><img src="img/tb-lupa.png"/></button>
     </form>
 </li>

Your complete code will look like this:

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 88%;
	margin-left:11.23046875%;
    text-align: left;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}

.nav ul li:hover{
    background-color: #000;
}

.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}

.nav ul li:hover ul{
    display: block;
}

.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}

.nav ul ul li {
    display: block;
}

.nav ul ul li a:hover{
    color: #fff;
}

.img-menu{
	display:none;	
}

/*-----------Config. da caixa de pesquisa------------*/

.search{
	width:130px;
	height:33px;
	top:-2px;
	right:-2px;
	outline:none;
	border:none;
	background:#222;
	color:#FFF;
	position:relative;	
	font-size:16px;
}

.btn-busca{
	width:33px;
	height:35px;
	outline:none;
	border:none;
	background:#FF7F00;
	cursor:pointer;
	top:2px;
	left:-4px;
	position:relative;
}
li.right { float:right; }

<div class="nav">
 <div class="img-menu"><img src="img/icn-menu.png"/></div>
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a href="#">Animes/desenhos</a>
                    </li>
                    <li><a href="#">Memes</a>
                    </li>
                    <li><a href="#">Histórias bisarras</a>
                    </li>
             </ul>
                <li> <a href="#">TI</a>
                <ul>
                    <li><a href="#">Progamção</a>
                    </li>
                    <li><a href="#">Tutorias</a>
                    </li>
              </ul>
            </li>
                        <li class="right">
                            
<form class="searchbox" action="busca.html" method="get">
    <input class="search" type="text" placeholder="Buscar...">
    <button class="btn-busca"><img src="img/tb-lupa.png"/></button>
</form>
    </li>
        </ul>
    </div>
    
 </div>

See an Example in full screen

thanks so much. Thank you so much

– Gilmar Santos

2015/10/23 at 14:08

Browser other questions tagged html css

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

by Romulo • **825** points · Answer 1 · 2015-10-23T01:04:00+00:00

The elements div and form have the CSS property display: block by default of the browser.

Follows a definição of that property:

The block element always starts in a new line and expands left and right as much as possible

However, there are several ways to make the elements side by side.

1. float:left

Here is an example of the property float worthwhile left (it is also possible to use right to align right):

div {
  float: left;
  border: 1px solid #000;
}

<div>elemento 1</div>
<div>elemento 2</div>

2. display: inline-block

Follow an example using the property display worthwhile inline-block:

div {
  display: inline-block;
  border: 1px solid #000;
}

<div>elemento 1</div>
<div>elemento 2</div>

3. display: flex

This option deserves an in-depth study. It is a novelty of CSS3 with a huge potential for element organization. I recommend reading the following material for further learning: A Complete Guide to Flexbox

.wrapper {
  display: flex;
}
.wrapper div {
  border: 1px solid #000;
}

<div class="wrapper">
  <div>elemento 1</div>
  <div>elemento 2</div>
</div>