foundations - header html css

Una barra superior de navegación centrada de ancho completo-Fundación Zurb

Question

Estoy usando Zurb Foundation 4 y necesito que mi barra de navegación superior esté centrada como .large-12.columns

Intenté lo siguiente (pero no funciona)

<div class="row">
  <div class="large-12 columns">
      <nav class="top-bar">
        <ul class="title-area">
          ...
        </ul>

        <section class="top-bar-section">
          <ul class="left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>

          <ul class="right">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </section>
    </nav>
  </div>
</div>

Actualizar:

jsFiddle según el ejemplo de Foundation. Si el tamaño del navegador es grande, el ancho de navegación cambia. Pero quiero que se centre fijo como contenido principal.

Answer 1

Como dice Foundation 4 docs: http://foundation.zurb.com/docs/components/top-bar.html

Si desea que su navegación se establezca en el ancho de la cuadrícula, envuélvala en div class = "contener a la cuadrícula" .

Así que trata de usar lo siguiente:

<div class="contain-to-grid">
    <!-- Your nav bar -->
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title area here... -->
        </ul>

        <section class="top-bar-section">
            <ul class="left">
                <!-- Title area here... -->
            </ul>
            <ul class="right">
                <!-- Title area here... -->
            </ul>
        </section>
     </nav>
</div>

Espero que esto ayude !

Answer 2

El marco de la base permite que la row anidada la primera <div class="row"> obtenga el ancho de la página, pero puede poner otra <div class="row"> en ella, que tiene un ancho de 12 columnas más grande.

Puede consultar los documentos relacionados con esta función aquí: http://foundation.zurb.com/docs/components/grid.html

¿Está seguro de que la fila que pega en la pregunta es la primera en su código HTML? Si es así, ¿puede pegar un enlace para una demostración de su código, por favor?

EDITAR

Si entiendo sus derechos, es bastante simple hacerlo con CSS:

.top-bar {
    max-width: 900px;
    margin:auto;
}

Answer 3

Si entiendo correctamente lo que quieres, solo necesitas envolver tu elemento nav.top-bar en un div con la clase contener-a-cuadrícula .

<div class="row">
  <div class="contain-to-grid">
    <nav class="top-bar">
      <ul class="title-area">
        ...
      </ul>

      <section class="top-bar-section">
        <ul class="left">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>

        <ul class="right">
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </section>

    </nav>
  </div>
</div>

Answer 4

<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
    <div class="row">
        <div class="large-12 columns">
            <ul class="menu" data-responsive-menu="accordion">
                <li><a href="#">1</a>
                </li>
                <li><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li><a href="#">4</a>
                </li>
            </ul>
        </div>
    </div>
</nav>