Menu icon Foundation

Designer

Just another web designer in the Philippines

My Posts


My Comments

Caleb Serna commented on Nuno Xavier's post over 5 years

If you're using Foundation 5.3 add this to your custom css:

@media only screen and (max-width: 40em) {
  .home-slider-orbit .orbit-next,
  .home-slider-orbit .orbit-prev {
    display: block; }
}

It will show arrows on small devices.

Caleb Serna commented on Peter Graff's post over 5 years

I tried the technique from the Foundation site in the beginning as well. I've made some customizations to combine topbar and offcanvas into one menu like this:

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <div class="hybrid-bar">
            <nav class="tab-bar">
                <div class="title-area">
                    <div class="name">
                        <h1><a href="#">My Site</a></h1> 
                    </div>
                </div>
                <section class="right-small show-for-small">
                    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
            </nav>
            <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li class="show-for-small">
                        <label>Foundation</label>
                    </li>
                    <li><a href="#">Link 1</a>
                    </li>
                    <li><a href="#">Link 2</a>
                    </li>
                    <li><a href="#">Link 3</a>
                    </li>
                    <li><a href="#">Link 4</a>
                    </li>
                    <li><a href="#">Link 5</a>
                    </li>
                </ul>
            </aside>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <h3>Foundation Top Bar/Off-Canvass Hybrid Navigation</h3>
                <p>Etiam dictum lectus est, nec hendrerit eros rhoncus eu. Proin condimentum nibh ante, a sagittis velit luctus a. Quisque quis risus et ante adipiscing porttitor. Etiam mi quam, eleifend nec venenatis ut, accumsan eget risus. Etiam lobortis,
                    massa quis sagittis varius, neque nulla rutrum risus, vel imperdiet sem tortor eget dolor. Phasellus suscipit mi ac varius posuere. Mauris gravida id dui sit amet ullamcorper. Nullam gravida nibh et mi iaculis, a varius dui varius.</p>
            </div>
        </div>
        <a class="exit-off-canvas"></a>
    </div>
</div>

I think it's more elegant this way rather than having two components to work with.

You can check the demo and instructions at
http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

Caleb Serna commented on Caleb Serna's post almost 6 years

Thanks for your replies. I'll checkout the javascript solution posted above.

It's just that some users really prefer seeing what they're used to on a desktop. I know it's the same content but the truth is some visitors just want to see what they're used to.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Nuno Xavier's post over 5 years

If you're using Foundation 5.3 add this to your custom css:

@media only screen and (max-width: 40em) {
  .home-slider-orbit .orbit-next,
  .home-slider-orbit .orbit-prev {
    display: block; }
}

It will show arrows on small devices.

You commented on Peter Graff's post over 5 years

I tried the technique from the Foundation site in the beginning as well. I've made some customizations to combine topbar and offcanvas into one menu like this:

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <div class="hybrid-bar">
            <nav class="tab-bar">
                <div class="title-area">
                    <div class="name">
                        <h1><a href="#">My Site</a></h1> 
                    </div>
                </div>
                <section class="right-small show-for-small">
                    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
            </nav>
            <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li class="show-for-small">
                        <label>Foundation</label>
                    </li>
                    <li><a href="#">Link 1</a>
                    </li>
                    <li><a href="#">Link 2</a>
                    </li>
                    <li><a href="#">Link 3</a>
                    </li>
                    <li><a href="#">Link 4</a>
                    </li>
                    <li><a href="#">Link 5</a>
                    </li>
                </ul>
            </aside>
        </div>
        <div class="row">
            <div class="large-12 columns">
                <h3>Foundation Top Bar/Off-Canvass Hybrid Navigation</h3>
                <p>Etiam dictum lectus est, nec hendrerit eros rhoncus eu. Proin condimentum nibh ante, a sagittis velit luctus a. Quisque quis risus et ante adipiscing porttitor. Etiam mi quam, eleifend nec venenatis ut, accumsan eget risus. Etiam lobortis,
                    massa quis sagittis varius, neque nulla rutrum risus, vel imperdiet sem tortor eget dolor. Phasellus suscipit mi ac varius posuere. Mauris gravida id dui sit amet ullamcorper. Nullam gravida nibh et mi iaculis, a varius dui varius.</p>
            </div>
        </div>
        <a class="exit-off-canvas"></a>
    </div>
</div>

I think it's more elegant this way rather than having two components to work with.

You can check the demo and instructions at
http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

You commented on Caleb Serna's post almost 6 years

Thanks for your replies. I'll checkout the javascript solution posted above.

It's just that some users really prefer seeing what they're used to on a desktop. I know it's the same content but the truth is some visitors just want to see what they're used to.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content