Menu icon Foundation

My Posts




  • 2
    Replies
  • Foundation 5 - Script Issues

    By Andrew Jolie

    javascript

    Hello, At first I thought I was having issues with the "topbar" but as I tried other functions such as "reveal" it occurred to me that the javascript events are not firing despite all the scripts loading successfully. For example, dropdown don't wo... (continued)

    Last Reply by Andrew Jolie about 5 years ago


My Comments

Andrew Jolie commented on Andrew Jolie's post over 3 years

Genius! Thanks

Andrew Jolie commented on Andrew Jolie's post about 5 years

Solved.

Added the following code to _settings.scss:

.foundation-data-attribute-namespace {
    font-family: false;
}

Andrew Jolie commented on Andrew Jolie's post about 5 years

Topbar and Reveal code:

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation">
      <ul class="title-area">
        <li class="name">
          <h1>
            <a href="#">Title</a>
          </h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
      </ul>
      <section class="top-bar-section">
        <ul class="right">
          <li class="divider"></li>
          <li class="has-dropdown">
            <a href="/blog">Drop 1/a>
            <ul class="dropdown">
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="has-dropdown">
            <a href="/contact">Drop 2</a>
            <ul class="dropdown">
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li class="divider"></li>
              <li><a href="#">See all &rarr;</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#" data-reveal-id="modalGetintouch" class="button">Get in touch</a>
          </li>
        </ul>
      </section>
    </nav>
  </div>

...

<div id="modalGetintouch" class="reveal-modal" data-reveal>
<h1> Modal window</h1>

...

</div>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Andrew Jolie's post over 3 years

Genius! Thanks

You commented on Andrew Jolie's post about 5 years

Solved.

Added the following code to _settings.scss:

.foundation-data-attribute-namespace {
    font-family: false;
}

You commented on Andrew Jolie's post about 5 years

Topbar and Reveal code:

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation">
      <ul class="title-area">
        <li class="name">
          <h1>
            <a href="#">Title</a>
          </h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
      </ul>
      <section class="top-bar-section">
        <ul class="right">
          <li class="divider"></li>
          <li class="has-dropdown">
            <a href="/blog">Drop 1/a>
            <ul class="dropdown">
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="has-dropdown">
            <a href="/contact">Drop 2</a>
            <ul class="dropdown">
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
              <li class="divider"></li>
              <li><a href="#">See all &rarr;</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#" data-reveal-id="modalGetintouch" class="button">Get in touch</a>
          </li>
        </ul>
      </section>
    </nav>
  </div>

...

<div id="modalGetintouch" class="reveal-modal" data-reveal>
<h1> Modal window</h1>

...

</div>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content