CODEWITHSUNDEEP
javascriptcsszurb-foundation
Ina Shn
Ina Shn

Reputation: 23

Zurb Foundation top-bar not working on small screens

I just started using foundations and frankly, its been a while since i built my last website. so please be pacient with me.

I deal with an issue with my menu (top-bar) now for over a day and can not find a clue what is going wrong.

The thing is, I really just need a basic menu, which is toggeling to the standard burger-menu on small screens, so far so good, it should work like demonstrated in the documentation right? But unfortunatly it does not and I cant figure out why.

I hope you can help me. I add my code without contents below. The file lies in a subdirectory, thats why all directory references are with ../ at the beginning.

Thanks a lot already! Ina

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inas | Ernährungs Coaching</title> 
    <link rel="stylesheet" href="../css/foundation.css" />
    <link rel="stylesheet" href="../css/additionals.css" />
    <script src="../js/vendor/modernizr.js"></script>

 </head>
 <body>
  <div id="wrap">
    <div id="header">
        <div class="row">
          <div class="large-12 columns clearfix">
            <!-- a header -->
          </div>
        </div>
        <br>
        <div class="row">
            <div class="small-12 columns">
                <!-- Navigation -->
                <div class="contain-to-grid sticky">
                    <nav class="top-bar data-topbar" >
                        <ul class="title-area" >
                            <li class="name">
                                <h1></h1>
                            </li>
                            <li class="toggle-topbar menu-icon"><a href="#"><span>Men&uuml;</span></a>
                            </li>
                        </ul>


                        <section class="top-bar-section">
                            <ul>
                              <li><a href="index.php">Start</a></li>
                              <li class="divider"><li>
                              <li><a href="index.php?page=angebot">Angebot</a></li>
                              <li class="divider"><li>
                              <li><a href="index.php?page=aktuelles">Aktuelles</a></li>
                              <li class="divider"><li>
                              <li><a href="index.php?page=mich">&Uuml;ber Mich</a></li>
                              <li class="divider"><li>
                              <li><a href="index.php?page=kontakt">Kontakt</a></li>
                            </ul>
                        </section>
                    </nav>
                </div><!-- /navigation -->
            </div>
        </div>
    </div>


    <div id="main"> 
        <!-- some content -->
    </div>

    <div id="footer">   
        <!-- a footer -->
    </div>
</div>

   <script src="../js/vendor/jquery.js"></script>
   <script src="../js/foundation.js"></script>
   <script src="../js/foundation/foundation.topbar.js"></script>
   <script>
   $(document).foundation();
   </script>
 </body>
</html>

Upvotes: 2

Views: 228

Answers (2)

atazmin
atazmin

Reputation: 5687

Additonal: to stick navigation at the top in small screens (up to 640px range)

"sticky_on: [small]; scrolltop: false"

and show parent link in mobile view you will need

"mobile_show_parent_link: true;"

<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small]; scrolltop: false; mobile_show_parent_link: true;">

Upvotes: 0

droolcup
droolcup

Reputation: 11

Compare your line of code:

<nav class="top-bar data-topbar" >

with the corresponding one from Foundation's documentation:

<nav class="top-bar" data-topbar role="navigation">

Your error should be pretty obvious now and can prevent Top Bar from functioning correctly.

Additional advice: Next time you want to use a predefined feature of Foundation, copy and paste the code and then apply your changes to it. It seems you have rewritten it and accidentally believed "data-topbar" to be a class.

Upvotes: 1

Related Questions