Menu icon Foundation
Topbar links not showing up for mobile. Can see in console.

I installed foundation 5.5.2 with bower. I can see my topbar links when the page is large, but when I try to click on the menu link when I have a small display, it won't show me my links. I can see them in my console, and my browser thinks they aren't hidden. When I scroll over them in my consult it highlights like they are there, but I can't see the text. I'll post some code now. Thanks for your help.

    <link rel="stylesheet" type="text/css" href="{% static "app/bower_components/foundation/css/foundation.min.css" %}" />
    <script src="{% static "app/bower_components/modernizr/modernizr.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "main.css" %}" />
    
    
    .....
    
    
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Shopping list app</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Da Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Login / Logout</a></li>
      <li><a href="#">Halp!</a></li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
    	<li class="has-dropdown">
			<a href="#">View</a>
			<ul class="dropdown">
			  <li><a href="#">First link in dropdown</a></li>
			</ul>
		</li>
		<li class="has-dropdown">
			<a href="#">Edit</a>
			<ul class="dropdown">
			  <li><a href="#">First link in dropdown</a></li>
			</ul>
		</li>
		<li class="has-dropdown">
			<a href="#">Plan</a>
			<ul class="dropdown">
			  <li><a href="#">First link in dropdown</a></li>
			</ul>
		</li>
    </ul>
  </section>
</nav>
            
            
            
            .......
            
            
    <script src="{% static "app/bower_components/jquery/dist/jquery.min.js" %}"></script>
    <script src="{% static "app/bower_components/foundation/js/foundation.js" %}"></script>
    <script src="{% static "app/bower_components/foundation/js/foundation/foundation.topbar.js" %}"></script>
    <script src="{% static "main.js" %}"></script>

         

topbarmobileinvisibleetc.

I installed foundation 5.5.2 with bower. I can see my topbar links when the page is large, but when I try to click on the menu link when I have a small display, it won't show me my links. I can see them in my console, and my browser thinks they aren't hidden. When I scroll over them in my consult it highlights like they are there, but I can't see the text. I'll post some code now. Thanks for your help.

    <link rel="stylesheet" type="text/css" href="{% static "app/bower_components/foundation/css/foundation.min.css" %}" />
    <script src="{% static "app/bower_components/modernizr/modernizr.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "main.css" %}" />
    
    
    .....
    
    
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Shopping list app</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Da Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Login / Logout</a></li>
      <li><a href="#">Halp!</a></li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
    	<li class="has-dropdown">
			<a href="#">View</a>
			<ul class="dropdown">
			  <li><a href="#">First link in dropdown</a></li>
			</ul>
		</li>
		<li class="has-dropdown">
			<a href="#">Edit</a>
			<ul class="dropdown">
			  <li><a href="#">First link in dropdown</a></li>
			</ul>
		</li>
		<li class="has-dropdown">
			<a href="#">Plan</a>
			<ul class="dropdown">
			  <li><a href="#">First link in dropdown</a></li>
			</ul>
		</li>
    </ul>
  </section>
</nav>
            
            
            
            .......
            
            
    <script src="{% static "app/bower_components/jquery/dist/jquery.min.js" %}"></script>
    <script src="{% static "app/bower_components/foundation/js/foundation.js" %}"></script>
    <script src="{% static "app/bower_components/foundation/js/foundation/foundation.topbar.js" %}"></script>
    <script src="{% static "main.js" %}"></script>

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Is any JS on your page working? I didn't see where foundation was initialized.

Should be

<script>
  $(document).foundation();
</script>

Also you can try loading foundation.min.js to help eliminate possibilities.

Brian Anderson over 4 years ago

I haven't added any css yet. The only css I have is the foundation css. main.css is empty.

Brian Anderson over 4 years ago

Rafi Benkual. Thank you very much! It was a dumb oversight on my part.

Rafi Benkual over 4 years ago

Looks like you have the right html http://codepen.io/rafibomb/pen/waojYx

Could be some CSS changes made. Can you add the CSS you used in the above codepen and link it back?

Note: You don't need foundation.js or foundation.topbar.js since foundation.min.js has all of it.