Menu icon Foundation
Sticky nav issues

Hello! My sticky nav is not working, here is the code:

<!-- HEADER

================================================== -->

<header role="banner">

 

    <!-- NAVBAR

================================================== -->

    <div class="navbar-wrapper container-fluid">

 

        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a class="navbar-brand" href="/"></a>

                </div>

                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li><a href="#about" class="smoothScroll">About</a></li>

                        <li><a href="#services" class="smoothScroll">Services</a></li>

                        <li><a href="#process" class="smoothScroll">Process</a></li>

                        <li><a href="#work" class="smoothScroll">Work</a></li>

                        <li><a href="https://www.medium.com" >Blog</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</header>

 

Thank you!

Sticky navnavnavigationdesktopmobile

Hello! My sticky nav is not working, here is the code:

<!-- HEADER

================================================== -->

<header role="banner">

 

    <!-- NAVBAR

================================================== -->

    <div class="navbar-wrapper container-fluid">

 

        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="container">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <a class="navbar-brand" href="/"></a>

                </div>

                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li><a href="#about" class="smoothScroll">About</a></li>

                        <li><a href="#services" class="smoothScroll">Services</a></li>

                        <li><a href="#process" class="smoothScroll">Process</a></li>

                        <li><a href="#work" class="smoothScroll">Work</a></li>

                        <li><a href="https://www.medium.com" >Blog</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</header>

 

Thank you!

Val Ery about 3 years ago

Hi sanlorena!

May you scripts is messed up (Foundation and Bootstrap)?

sanlorena about 3 years ago

Thank you for pointing this out... I had another website that I built with Bootstrap, but I forgot this was done with Foundation and copied the bootstrap nav to this one... In any case, I updated the nav to Foundation, but now it is off to the left and still not sticky...

Here is the code:

    <div class="contain-to-grid sticky">

    <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">

        <ul class="dropdown menu" data-dropdown-menu>

          <li><a href="#about" class="smoothScroll">about</a></li>

          <li><a href="#portfolio" class="smoothScroll">portfolio</a></li>

          <li><a href="#contact" class="smoothScroll">contact</a></li>

        </ul>

    </nav> 

  </div>

 

Here is the JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

 

<script type="text/javascript" src="js/main.js"></script>

 

 

<script src="js/vendor/foundation.min.js"></script>

 

<script src="js/vendor/what-input.js"></script>

 

   <script>

    $(document).foundation();

  </script>

Val Ery about 3 years ago

 Hi!

You have chosen foundation 5.5.3? (docs - http://foundation.zurb.com/sites/docs/v/5.5.3/)

See example with zf5 - http://codepen.io/Val_Ery/pen/BLNYVw

If you are interested in version 6 (docs - http://foundation.zurb.com/sites/docs/), see examples with it:

simple sticky menu - http://codepen.io/Val_Ery/pen/eZVNdW

sticky sidebar - http://codepen.io/Val_Ery/pen/XKLKay

sticky bottom menu - http://codepen.io/Val_Ery/pen/AXyryj

sanlorena about 3 years ago

I was using Foundation 5 when I created this site, but I am not sure how to make it all work now that I see a lot of more documentation for 6, so I will have to leave it as is.

Thank you for your help!