Menu icon Foundation

Developer | Cleveland, TN

My Posts

No Content

My Comments

Kyle Johnson commented on Peter Kochs's post over 5 years

Try removing the class right from the labels.

Example:
- See in Editor: http://codepen.io/kbjohnson90/pen/DCfhp/
- See Fullscreen: http://cdpn.io/DCfhp

Kyle Johnson commented on Eduardo Weidman's post over 5 years

The top-bar seems pretty specific.
I'd use the grid instead.

For example:
- See in Editor: http://codepen.io/kbjohnson90/pen/rJsFB
- See Full Screen: http://cdpn.io/rJsFB

Kyle Johnson commented on Paul Batey's post over 5 years

To add to Wing-Hou Chan pen, you can add Source Ordering to the columns so that 3 is above 4 in the small grid. http://cdpn.io/terfD

      <div class="small-12 medium-6 medium-push-6 columns three">
        ...
      </div>
      <div class="small-12 medium-6 medium-pull-6 columns four">
        ...
      </div>

Kyle Johnson commented on George Chatzidelios's post over 5 years

If you remove the .row class then it will bypass foundations default margins and padding.
I do no place my navigation inside of a .row.

If you place your navigation inside a 'wrapper' class (other than a .row), then you can set the background color of that 'wrapper' class which will span the width of the screen.

Here is a pen showing the 'wrapper' class: http://codepen.io/kbjohnson90/pen/Jutmo/

<div class="contain-to-grid nav-wrapper">
    <nav class="top-bar" data-topbar>
      ...
    </nav>
</div>

Kyle Johnson commented on Luke Cooper's post over 5 years

The .active class must be assigned to the proper li element for each page.

If the website is a static website then this must be done in each individual file.
HTML
<li>
<a href="index.php">Home</a>
</li>
<li class="active">
<a href="SignUp.php">SignUp</a>
</li>

If you are using a back-end framework then you will need to use some sort of logic.

<li class="<?php echo ($this->uri->segment(2) == 'SignUp.php') ? "active " : " "; ?>">
  <a href="SignUp.php">Sign up</a>
</li>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Peter Kochs's post over 5 years

Try removing the class right from the labels.

Example:
- See in Editor: http://codepen.io/kbjohnson90/pen/DCfhp/
- See Fullscreen: http://cdpn.io/DCfhp

You commented on Eduardo Weidman's post over 5 years

The top-bar seems pretty specific.
I'd use the grid instead.

For example:
- See in Editor: http://codepen.io/kbjohnson90/pen/rJsFB
- See Full Screen: http://cdpn.io/rJsFB

You commented on Paul Batey's post over 5 years

To add to Wing-Hou Chan pen, you can add Source Ordering to the columns so that 3 is above 4 in the small grid. http://cdpn.io/terfD

      <div class="small-12 medium-6 medium-push-6 columns three">
        ...
      </div>
      <div class="small-12 medium-6 medium-pull-6 columns four">
        ...
      </div>

You commented on George Chatzidelios's post over 5 years

If you remove the .row class then it will bypass foundations default margins and padding.
I do no place my navigation inside of a .row.

If you place your navigation inside a 'wrapper' class (other than a .row), then you can set the background color of that 'wrapper' class which will span the width of the screen.

Here is a pen showing the 'wrapper' class: http://codepen.io/kbjohnson90/pen/Jutmo/

<div class="contain-to-grid nav-wrapper">
    <nav class="top-bar" data-topbar>
      ...
    </nav>
</div>

You commented on Luke Cooper's post over 5 years

The .active class must be assigned to the proper li element for each page.

If the website is a static website then this must be done in each individual file.
HTML
<li>
<a href="index.php">Home</a>
</li>
<li class="active">
<a href="SignUp.php">SignUp</a>
</li>

If you are using a back-end framework then you will need to use some sort of logic.

<li class="<?php echo ($this->uri->segment(2) == 'SignUp.php') ? "active " : " "; ?>">
  <a href="SignUp.php">Sign up</a>
</li>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content