Menu icon Foundation
Center nav in a row full width of parent

I got a column in a row that is 75% of the viewport. In this i got a nav that is the full width of its parent.
My question is, how do i center the nav element in the column using foundation helper classes?

Without foundation i can set the nav element to block, width: 350px, margin: 0 auto
which centers it, but i would suspect foundation already has a class that solves this.

In the grid documentation
http://foundation.zurb.com/docs/components/grid.html

Their is a class called small-centered, but this only center the column if it isint 100% in width. And if i set width to small-5, the nav still isint centered. Cause the column is only centered in the row, the nav isint centered in the column, which gives excess space on the right side of the nav.

Anyone who can help me out / point me in the right direction?

Kind regards.

<div class="row">
    <div class="small-12 columns">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name link-active">
                    <h2><a href="#">Title</a></h2>
                </li>
                <li class="toggle-topbar menu-icon">
                    <a href="#">
                        <span>Menu</span>
                    </a>
                </li>
            </ul>

            <section class="top-bar-section">
                <ul class="left">
                    <li>
                        <a href="#">Button</a>
                    </li>
                    <li>
                        <a href="#">Button</a>
                    </li>
                    <li>
                        <a href="#">Button</a>
                    </li>
                    <li>
                        <a href="#">Button</a>
                    </li>
            </section>
        </nav>
    </div>
</div>

Xx1

centernav

I got a column in a row that is 75% of the viewport. In this i got a nav that is the full width of its parent.
My question is, how do i center the nav element in the column using foundation helper classes?

Without foundation i can set the nav element to block, width: 350px, margin: 0 auto
which centers it, but i would suspect foundation already has a class that solves this.

In the grid documentation
http://foundation.zurb.com/docs/components/grid.html

Their is a class called small-centered, but this only center the column if it isint 100% in width. And if i set width to small-5, the nav still isint centered. Cause the column is only centered in the row, the nav isint centered in the column, which gives excess space on the right side of the nav.

Anyone who can help me out / point me in the right direction?

Kind regards.

<div class="row">
    <div class="small-12 columns">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name link-active">
                    <h2><a href="#">Title</a></h2>
                </li>
                <li class="toggle-topbar menu-icon">
                    <a href="#">
                        <span>Menu</span>
                    </a>
                </li>
            </ul>

            <section class="top-bar-section">
                <ul class="left">
                    <li>
                        <a href="#">Button</a>
                    </li>
                    <li>
                        <a href="#">Button</a>
                    </li>
                    <li>
                        <a href="#">Button</a>
                    </li>
                    <li>
                        <a href="#">Button</a>
                    </li>
            </section>
        </nav>
    </div>
</div>

Xx1
Rafi Benkual over 4 years ago