Menu icon Foundation
Top-Bar fixed for mobile devices

The top-bar on my actual web-project is define as sticky. Is there a way to define these top-bar as fixed on mobile devices? The navigation should always be on top of the site.

Have a look: http://deus.predatordesign.de

<div class="sticky contain-to-grid">
          <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name"></li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul>
            <section class="top-bar-section">
                <ul class="right">
                    <li class="hightlight"><a href="#">Anfrage stellen</a></li>
                </ul>
                <ul class="left">
                    <li class="active"><a href="#">Startseite</a></li>
                    <li><a href="#">Unternehmen</a></li>
                    <li><a href="#">Leistungen</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </section>
        </nav>
      </div>
            

         

topbarfixesstickyclassmobile

The top-bar on my actual web-project is define as sticky. Is there a way to define these top-bar as fixed on mobile devices? The navigation should always be on top of the site.

Have a look: http://deus.predatordesign.de

<div class="sticky contain-to-grid">
          <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name"></li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul>
            <section class="top-bar-section">
                <ul class="right">
                    <li class="hightlight"><a href="#">Anfrage stellen</a></li>
                </ul>
                <ul class="left">
                    <li class="active"><a href="#">Startseite</a></li>
                    <li><a href="#">Unternehmen</a></li>
                    <li><a href="#">Leistungen</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </section>
        </nav>
      </div>
            

         
Jon about 4 years ago

Do you mean that it shouldn't be sticky on mobile?

If thats the case, you can just toggle the .sticky class on/off depending on the device, with some JavaScript.

This script it what I use: https://gist.github.com/jonmunson/51eab4369dcf9b59e399

Or, you could use a media query within CSS/SCSS to apply the properties of the .sticky class based on the viewport width (maybe medium-up).

Rob Lampard about 4 years ago

If you want the Top-Bar to always appear at the top on mobile just add the tag below around what you currently have in a duplicate menu

<div class="fixed show-for-small">

I'm not sure there's an easier way other than duplicating the nav in the two different sticky/fixed wrappers for different screen sizes..

Jonas Marlo Loerken almost 4 years ago

Thank you guys! There should be some media-tag like

<div class="fixed-for-small sticky-for-medium-up">

:-D