My search bar does not position correctly

Asked

Viewed 115 times

1

My search bar is not positioned correctly at the end, and the initial part of the menu is not at the beginning, everything is centralized.

Follows my code:

.barra{
        display: inline-flex;
        background-image: linear-gradient(150deg, #000080, #00BFFF);
        height: 50px
    }

.pesquisa{
    margin-right: auto;
    margin-left: auto;
    display: inline-flex;
}


.home2:not(.tutoriais){

    display: inline-flex;
    float: left !important;
    width: 50%;
    margin-right: 100px;
}


.section{

}
.pesquisa input button{
    float: right;
}


                    <div class="nav2 barra clear">
                    <ul class="home2">
                        <a class="Tutoriais" href="">Tutoriais</a>
                        <a class="Forum" href="">Fórum</a>
                        <a class="Login" href="">Login</a>
                        <a class="Cadastre-se" href="">Cadastre-se</a>
                    </ul>
                    <form method="get" class="pesquisa">
                        <input type="text" name="pesquisar" placeholder="Faça sua pesquisa" />
                        <button class="pesquisar" >Pesquisar</button>
                    </form>
                </div>

I would like it to look similar to the image search bar below: inserir a descrição da imagem aqui

css menu nav-bar

  • Young your code is pretty messed up. You would have some image of the layout of how you would like it to stay?

  • https://imgur.com/a/Yaz2I

  • good that it worked. If my answer has helped you in any way consider marking it as accepted in this ✔ ai on the left side near the arrows. Just click on it :)

2 answers

1


Young man, according to your question and the comments I’ve read around here, I believe that’s what you want. The menu occupies the full width and the right search bar.

Your CSS had a lot of stuff you didn’t need so I simplified it a little bit by taking some things out. Still not perfect, but I think it’s a way for you to move on with your project. (for example <ul> without <li> it’s not right, you can fix it if you want)

See how it looks on Snippet

body {
	margin: 0;
}
.barra{
    display: inline-flex;
    background-image: linear-gradient(150deg, #000080, #00BFFF);
    height: 50px;
	width: 100%;
}
.pesquisa{
    display: inline-flex;
}
.home2:not(.tutoriais){
    display: inline-flex;
    width: 100%;
}
ul a {
	color: #fff;
	margin-right: 20px;
}
<div class="nav2 barra clear">
	<ul class="home2">
		<a class="Tutoriais" href="">Tutoriais</a>
		<a class="Forum" href="">Fórum</a>
		<a class="Login" href="">Login</a>
		<a class="Cadastre-se" href="">Cadastre-se</a>
	</ul>
	<form method="get" class="pesquisa">
		<input type="text" name="pesquisar" placeholder="Faça sua pesquisa" />
		<button class="pesquisar" >Pesquisar</button>
	</form>
</div>

  • Man, thank you so much :3 I’m still learning CSS first time trying to build something. Thanks msm

  • And it was really working separately, the only problem with my code was that some things were giving conflict, vlw ai cara

  • Yes I had a lot of class that I didn’t need, so I took a look at CSS, read a lot, and see some videos on Youtube, it will help you a lot to better understand HTML/CSS, success! If you can mark the answer as resolved thank you. So help keep Stackoverflow organized.

  • how does this ?

  • Right at the beginning of my answer the left has the number 0 with two arrows one above and one below. There is an icon ✔ just click on it and the answer is as accepted.

  • See, man, I help a lot

Show 1 more comment

0

Your question was not clear, but come on, that’s what you seek?

.barra {
  display: inline-flex;
  background-image: linear-gradient(150deg, #000080, #00BFFF);
  height: 50px
}

.pesquisa {
  margin-right: auto;
  margin-left: auto;
  display: inline-flex;
}

.home2:not(.tutoriais) {
  display: inline-flex;
  float: left !important;
  width: 50%;
  margin-right: 100px;
}

.pesquisa input button {
  float: right;
}
 <br>
  <br>
   <br>
<form method="get" class="pesquisa">
 
 <div class="nav2 barra clear">
    <p class="home2">
      &nbsp;<a class="Tutoriais" href="">Tutoriais</a>&nbsp;
      <a class="Forum" href="">Fórum</a>&nbsp;
      <a class="Login" href="">Login</a>&nbsp;
      <a class="Cadastre-se" href="">Cadastre-se</a>
    </p>


    <input type="text" name="pesquisar" placeholder="Faça sua pesquisa" />

    <button class="pesquisar">Pesquisar</button>


  </div>
</form>

  • Almost that, the problem is that I wanted the search bar there on the right of the site >>> at the end of the div

Browser other questions tagged css menu nav-bar

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