Doubt with Flex-Box CSS

Question

Doubt with Flex-Box CSS

Navigation

#1 by (0 votes)

0

I'm stuck with a flex display question in this code snippet: link

I want the box to stick to the top of the page, regardless of whether the menu scrolls or not. Let there be no margin. I tried margin: 0 in the nav element, but it did not work.

What about the search box, should not it also be with the nav? How do I include it within the menu?

To finish. How could I make the same menu using block or inline-block? I tried and never showed up if I wanted the box.

Thank you

html5 css

asked by anonymous 28.06.2018 / 01:09

1 answer

Simple login system with javascript [duplicate] Line break within an input type "search"

score 0 · Accepted Answer

You need to take the default margin of body :

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

Also take the padding of the <ul> , which is the .navigation class:

.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;
}

The div that holds your search box is out of nav :

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

Place at the end of nav and insert into CSS the styles to center and give a top margin of the menu:

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

How it works:

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>