Menu icon Foundation

Designer

My Posts

No Content

My Comments

Web Learning Track commented on Dan Excel's post over 5 years

It maybe because you html code:

<nav class="top-bar" data-topbar>
<section class="top-bar-section">
        <ul class="left">

        <li class="active"><a href="index.html">Home</a></li>

        <li class="has-dropdown"><a href="blog.html">Blog </a>
                <ul class="dropdown">
            <li><a href="#" title="Events">Special Events</a></li>
            <li><a href="#" title="Post">Popular Post</a></li>
            <li><a href="#" title="Categories">Categories</a></li>
            <li><a href="#" title="Archives">Archives</a></li>
         </ul> 
  </li>

          <li><a href="grid.html" title="Menu">Grid</a></li>

          <li><a href="contact.html" title="Menu">Contact</a></li>

    </ul>
 </section>
</nav>

then add to your css something like this:

.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
        color: white;
        background: #bb0000 ; 

Web Learning Track commented on coralie diatkine's post over 5 years

if you want to use accordion with CSS only, look on this sample and adjust it to your likeness:

http://jsfiddle.net/Wolfy87/Z4Mr3/

Web Learning Track commented on abslayer's post over 5 years

Try to place your stylesheet before the script
... and in the same css folder.

<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/style.css">
 <script src="js/vendor/modernizr.js"></script>

Web Learning Track commented on Jon Leskowski's post over 5 years

Not sure if I understand your question correctly, but if you know some html and CSS you don't need to use Sass. Just download the html with css (http://foundation.zurb.com/develop/download.html) by clicking the big button "Download Everything" and start playing with that. You can use free code editor from here: http://brackets.io/

if you don't have one.

Then go to youtube and type zurb foundation tutorial and you will find few. You can make website like shown in this video: http://www.youtube.com/watch?v=VUu1x2INVsg
without installing Sass.

Web Learning Track commented on Fred Sheffield's post over 5 years

You code work ok in JSFIDDLE. The only problem you may have that your write "This Button is Bigger" which take more space than the other buttons. Try it with "Big Button" and see if that works for you.

    <div class="row text-center" data-equalizer>
    <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Big Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
</div>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Dan Excel's post over 5 years

It maybe because you html code:

<nav class="top-bar" data-topbar>
<section class="top-bar-section">
        <ul class="left">

        <li class="active"><a href="index.html">Home</a></li>

        <li class="has-dropdown"><a href="blog.html">Blog </a>
                <ul class="dropdown">
            <li><a href="#" title="Events">Special Events</a></li>
            <li><a href="#" title="Post">Popular Post</a></li>
            <li><a href="#" title="Categories">Categories</a></li>
            <li><a href="#" title="Archives">Archives</a></li>
         </ul> 
  </li>

          <li><a href="grid.html" title="Menu">Grid</a></li>

          <li><a href="contact.html" title="Menu">Contact</a></li>

    </ul>
 </section>
</nav>

then add to your css something like this:

.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
        color: white;
        background: #bb0000 ; 

You commented on coralie diatkine's post over 5 years

if you want to use accordion with CSS only, look on this sample and adjust it to your likeness:

http://jsfiddle.net/Wolfy87/Z4Mr3/

You commented on abslayer's post over 5 years

Try to place your stylesheet before the script
... and in the same css folder.

<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/style.css">
 <script src="js/vendor/modernizr.js"></script>

You commented on Jon Leskowski's post over 5 years

Not sure if I understand your question correctly, but if you know some html and CSS you don't need to use Sass. Just download the html with css (http://foundation.zurb.com/develop/download.html) by clicking the big button "Download Everything" and start playing with that. You can use free code editor from here: http://brackets.io/

if you don't have one.

Then go to youtube and type zurb foundation tutorial and you will find few. You can make website like shown in this video: http://www.youtube.com/watch?v=VUu1x2INVsg
without installing Sass.

You commented on Fred Sheffield's post over 5 years

You code work ok in JSFIDDLE. The only problem you may have that your write "This Button is Bigger" which take more space than the other buttons. Try it with "Big Button" and see if that works for you.

    <div class="row text-center" data-equalizer>
    <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Big Button</a>
  </div>
  <div class="small-12 medium-3 columns text-center text-small">
    <a href="#" class="button large radius" data-equilizer-watch style="width: 100%">Small Button</a>
  </div>
</div>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content