Leave options in menu total size

Asked

Viewed 525 times

3

I am trying to leave the options of a menu that I have distributed according to the total size of the menu, I have been trying some possibilities, including in a post right here, but unsuccessfully.

The site I have as an example is this: Site Example

My code is like this:

        <div class="col-md-8"> 
      <!-- NAVEGAÇÃO PRINCIPAL -->
      <div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
      <nav>
        <ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800" name="flexnav">
          <li><a href="index.php">INÍCIO</a></li>
          <li><a href="missao.php">MISSÃO E VISÃO</a></li>
          <li><a href="equipe.php">QUEM SOMOS </a></li>
          <li><a href="treinamentos.php">TREINAMENTOS</a></li>
          <li><a href="eventos.php">EVENTOS</a></li>
          <li><a href="contato.php">CONTATOS</a></li>
        </ul>
      </nav>
      <!-- FIM NAVEGAÇÃO --> 
    </div>
  </div>

The css:

.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
  display:table-cell;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}

One of my attempts was to give display: table; to ul and display:table-cell; to read, but could not, unfortunately the site is not yet on the air, but what I have locally can be seen by this image:

Site em Desenvolvimento

css
  • 1

    Hello @Renan, this site is an image, a static layout that was passed to me by the designer.

  • do you want it to stay that way? https://jsfiddle.net/0k51c1nt/6/embedded/result/

  • Hello @Samirbraga, thanks for the suggestion and tip, helped me understand the problem.

2 answers

2


I managed to solve following the guidelines of this site: http://www.sitepoint.com/

The settings applied to my example were these:

nav {
    width: 100%;
    background: #113066;
}

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    width: 16.6667%; /* fallback for non-calc() browsers */
    width: calc(100% / 6);
}

The code that was like this:

<div class="col-md-8">

Stayed like this:

<div class="col-md-12">

In the example above we used Calc() with percentages for six columns to get an optimized result, thanks to all for the tips.

-1

Your CSS should look like this:

ul {

    display:flex;    
    flex-flow: row nowrap;
    justify-content:space-between;    
}

li {

    flex-grow:1; /* SE PREFERIR TENTE ISSO TAMBÉM*/
}

See an example in: http://codepen.io/colombe/pen/ezmjXq

Browser other questions tagged css

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