Menu icon Foundation

My Posts






My Comments

worldrom commented on worldrom's post about 2 years

Hi Ryan,
Sorry couldn't figure out how to use Code Pen :-) Anyway, I posted my html code above.  When you have the time, hope you can help.  Thanks! 
See also my screenshots above.
Thanks,
Rom

worldrom commented on worldrom's post about 2 years

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Template</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div style="background-color:#e6e6e6">
<div class="row">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">COMPANY LOGO</div>
</div>

<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><img src="http://www.teknikabuilders.com/img/logo1.jpg"&gt;&lt;/li>
</ul>

</div>
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">HOME</a></li>
<li>
<a href="#">ABOUT US</a>
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS &amp; SERVICES</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
</div>
</div>

&lt;div class="row"&gt;
  &lt;div class="large-12 columns"&gt;
    &lt;h1&gt;Welcome to Foundation&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;div class="large-12 columns"&gt;
    &lt;div class="callout"&gt;
      &lt;h3&gt;We&amp;rsquo;re stoked you want to try Foundation! &lt;/h3&gt;
      &lt;p&gt;To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.&lt;/p&gt;
      &lt;p&gt;Once you've exhausted the fun in this document, you should check out:&lt;/p&gt;
      &lt;div class="row"&gt;
        &lt;div class="large-4 medium-4 columns"&gt;
          &lt;p&gt;&lt;a href="http://foundation.zurb.com/docs"&gt;Foundation Documentation&lt;/a&gt;&lt;br /&gt;Everything you need to know about using the framework.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="large-4 medium-4 columns"&gt;
          &lt;p&gt;&lt;a href="http://zurb.com/university/code-skills"&gt;Foundation Code Skills&lt;/a&gt;&lt;br /&gt;These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="large-4 medium-4 columns"&gt;
          &lt;p&gt;&lt;a href="http://foundation.zurb.com/forum"&gt;Foundation Forum&lt;/a&gt;&lt;br /&gt;Join the Foundation community to ask a question or show off your knowlege.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="large-4 medium-4 medium-push-2 columns"&gt;
          &lt;p&gt;&lt;a href="http://github.com/zurb/foundation"&gt;Foundation on Github&lt;/a&gt;&lt;br /&gt;Latest code, issue reports, feature requests and more.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="large-4 medium-4 medium-pull-2 columns"&gt;
          &lt;p&gt;&lt;a href="https://twitter.com/ZURBfoundation"&gt;@zurbfoundation&lt;/a&gt;&lt;br /&gt;Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;



&lt;script src="js/vendor/jquery.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/what-input.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/foundation.js"&gt;&lt;/script&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;

</body>
</html>

worldrom commented on worldrom's post about 2 years

Any other suggestions re top bar and responsive navigation?

worldrom commented on worldrom's post about 2 years

Thanks Ryan,
I used the Top Nav responsive.  And here it is:

In mobile view, the links are horizontal and not vertical.  As you can see, my links ex. Home, About Us, Products etc. are in one line and the 4th link "Gallery" can't be seen anymore.  I wanted it like a regular vertical navigation menu on mobile view. 
What's the trick? Thanks

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on worldrom's post about 2 years

Hi Ryan,
Sorry couldn't figure out how to use Code Pen :-) Anyway, I posted my html code above.  When you have the time, hope you can help.  Thanks! 
See also my screenshots above.
Thanks,
Rom

You commented on worldrom's post about 2 years

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Template</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div style="background-color:#e6e6e6">
<div class="row">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">COMPANY LOGO</div>
</div>

<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><img src="http://www.teknikabuilders.com/img/logo1.jpg"&gt;&lt;/li>
</ul>

</div>
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">HOME</a></li>
<li>
<a href="#">ABOUT US</a>
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS &amp; SERVICES</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
</div>
</div>

&lt;div class="row"&gt;
  &lt;div class="large-12 columns"&gt;
    &lt;h1&gt;Welcome to Foundation&lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;div class="large-12 columns"&gt;
    &lt;div class="callout"&gt;
      &lt;h3&gt;We&amp;rsquo;re stoked you want to try Foundation! &lt;/h3&gt;
      &lt;p&gt;To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.&lt;/p&gt;
      &lt;p&gt;Once you've exhausted the fun in this document, you should check out:&lt;/p&gt;
      &lt;div class="row"&gt;
        &lt;div class="large-4 medium-4 columns"&gt;
          &lt;p&gt;&lt;a href="http://foundation.zurb.com/docs"&gt;Foundation Documentation&lt;/a&gt;&lt;br /&gt;Everything you need to know about using the framework.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="large-4 medium-4 columns"&gt;
          &lt;p&gt;&lt;a href="http://zurb.com/university/code-skills"&gt;Foundation Code Skills&lt;/a&gt;&lt;br /&gt;These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="large-4 medium-4 columns"&gt;
          &lt;p&gt;&lt;a href="http://foundation.zurb.com/forum"&gt;Foundation Forum&lt;/a&gt;&lt;br /&gt;Join the Foundation community to ask a question or show off your knowlege.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="large-4 medium-4 medium-push-2 columns"&gt;
          &lt;p&gt;&lt;a href="http://github.com/zurb/foundation"&gt;Foundation on Github&lt;/a&gt;&lt;br /&gt;Latest code, issue reports, feature requests and more.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="large-4 medium-4 medium-pull-2 columns"&gt;
          &lt;p&gt;&lt;a href="https://twitter.com/ZURBfoundation"&gt;@zurbfoundation&lt;/a&gt;&lt;br /&gt;Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;



&lt;script src="js/vendor/jquery.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/what-input.js"&gt;&lt;/script&gt;
&lt;script src="js/vendor/foundation.js"&gt;&lt;/script&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;

</body>
</html>

You commented on worldrom's post about 2 years

Any other suggestions re top bar and responsive navigation?

You commented on worldrom's post about 2 years

Thanks Ryan,
I used the Top Nav responsive.  And here it is:

In mobile view, the links are horizontal and not vertical.  As you can see, my links ex. Home, About Us, Products etc. are in one line and the 4th link "Gallery" can't be seen anymore.  I wanted it like a regular vertical navigation menu on mobile view. 
What's the trick? Thanks

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content