0

Estou encucado com uma questão do display flex neste trecho de código: https://jsfiddle.net/h6tgnu19/7/

Quero o box fique grudado no topo da página, independente do menu rolar ou não. Que não haja margin nenhuma. Tentei margin: 0 no elemento nav, mas não funfou.

E quanto ao box de pesquisa, não deveria estar também junto com o nav? Como faço para incluir dentro do menu?

Para finalizar. Como poderia fazer o mesmo menu usando block ou inline-block? Tentei e nunca aparecia se quer o box.

Agradecido

0

1 Resposta 1

0

Você precisa tirar a margem padrão do body:

body {
    background: #f9f9eb;
    margin: 0; ← ← ← ← ← ← ← ←
}

Tire também o padding da <ul>, que é a classe .navigation:

.navigation {
    list-style: none;
    margin: 0;
    padding: 0; ← ← ← ← ← ← ← ←
    background: #0b5eec;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
}

A div que segura a sua caixa de busca está fora do nav:

<nav>
   ...
</nav>
<div class="search-box">
   ...
</div>

Coloque no final do nav e insira no CSS os estilos para centralizar e dar uma margem superior do menu:

.search-box{
   text-align: center;
   margin-top: 15px;
}

Como fica:

body {
   background: #f9f9eb;
   margin: 0;
}

nav{
   background: #0b5eec;
}

.navigation {
   list-style: none;
   margin: 0;
   padding: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-flow: row wrap;
   flex-flow: row wrap;
   justify-content: center;
}

.search-box{
    margin: 15px 15px 0;
}

.navigation a {
   text-decoration: none;
   display: block;
   padding: 15px;
   color: white;
}

.navigation a:hover {
   background: #000;
   text-decoration: underline;
}
<header>
  <nav>
      <ul class="navigation">
          <li>
              <div class="search-box">
                <label>
                  <input name="search-box" value="Search..."/>
                </label>
              </div>
          </li>
          <li><a href="#">Index</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </nav>
</header>

8
  • Muito obrigado pela ajuda. Realmente esquecido de colocar a classe na div aqui no arquivo, mas não no link que passei rsrs Bem isto mesmo no margin 0 do body. Sempre me distraio com isto. Quando ao padding do ul não tinha percebido isto. Senão der o padding, fica um espaço no canto esquerdo. Se mudo o justify-content pra flex-end, então este padding não seria necessário, mas pro canto esquerdo é preciso. O único problema ainda é a questão da caixa de texto de pesquisa. Quero que fique dentro do box-model dos links da u,. seja ele no canto direito ou esquerdo e não fora do contexto. Commented 28/06/2018 às 1:38
  • Era isso mesmo que queria como mostrado na resposta?
    – Sam
    Commented 28/06/2018 às 1:40
  • Quase isto. Faltou a parte apenas da caixa de texto como expliquei acima. Quero que a caixa de pesquisa fique dentro do box model como os links. Seja ele no canto esquerdo ou direito. Ele está fora do conteúdo como se iniciasse um novo box model. Commented 28/06/2018 às 2:11
  • Veja agora.....
    – Sam
    Commented 28/06/2018 às 2:21
  • Perfeito. Muito obrigado mesmo. Se você não se importar, poderia me explicar sobre as mudanças? 1. Você retirou o background da ul e passou pra nav; Esqueci realmente que a caixa de texto tinha que ser inserido como elemento li. Commented 28/06/2018 às 3:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .