Menu icon Foundation
Sticky Nav- display: none problem

Hi all 

Iv'e created a sticky navigation, in which i would like to have a logo above the nav, which then appears in the nav when scrolled (https://codepen.io/anon/pen/zqjmGv).

The issue I have is I am using display:none and then display:block along with visibility and opacity. I was expecting display none to remove the menu <li> completely and move the following <li> over, but this doesn't happen.

Anyone have any ideas please?

Thanks

Will

 

<div class="header">
  <!-- header -->
  <div class="row">
    <h1>Stickly</h1>
  </div>
</div>

<div id="page">
  <div class="nav-container" data-sticky-container>
    <!-- navigation -->
    <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
      <div class="menu row expanded">
        <ul class="inline-list">
          <li class="logo">Stickly</li>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="team.html">Team</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="content row panel">
    <!-- content -->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
  $color-primary-0:rgba(228, 87, 46, 1);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700,500,600,900|Patua+One);
$logoFont: 'Patua One',
cursive;
$baseFont: 'Source Code Pro',
sans-serif;
$black: #222;
$dark-gray: #444;
$medium-gray: #666;
$white: #fff;


body {
  position: relative;
  cursor: default;
  letter-spacing: 1px;
  cursor: default;
  font-family: $baseFont;
  font-weight: 300,
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  font-family: $logoFont;
}

a {
  font-style: italic;
}

ul {
  list-style: none outside;
}


/*-- header --*/

.header {
  position: relative;
  background: $black;
  height: 5rem;
  h1 {
    position: absolute;
    left: 42%;
    top: 50%;
    transform: translateY(-50%);
    color: $white;
  }
}

.sticky {
  background: $dark-gray;
  width: 100%;
}

.logo {
  color: $white;
  font-family: $logoFont;
  font-size: 1.2rem;
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: display 0s, visibility 0s, opacity 0.5s ease-in-out;
}

.is-stuck .logo {
    display: block;
    visibility: visible;
    opacity: 1;
}



/*-- menu --*/

.nav-container {
  transition: all 0.5s ease;
}

.menu {
  width: 100%;
  background: $dark-gray;
  height: auto;
  .inline-list {
    text-align: center;
    margin: 0;
    padding: 0;
    li {
      width: 100%;
      padding: 0.3rem 1.2rem;
      float: none;
      display: inline-block;
    }
    a {
      background: transparent;
      color: #999;
      padding: 0.6rem 1rem;
      &:hover {
        color: darken($white, 55%);
        transition: all 500ms ease-in-out;
        /* easeInOutCubic */
      }
    }
  }
  .active a {
    color: darken($white, 55%);
  }
}


/*-- content --*/

.content {
  padding: 2.5rem 0 2rem;
  p {
    padding: 0 0.6rem;
    text-indent: 2rem;
  }
}

@media only screen and (min-width: 40.063em) {
  /*-- header --*/
  .header {
    height: 6rem;
    h1 {
      left: 45%;
    }
  }
  /*-- menu --*/
  .menu {
    padding-top: 1.4rem;
    height: 5rem;
    .inline-list {
      li {
        padding-top: 1.6rem;
        padding-bottom: 1.8rem;
        border-left: 0.08rem solid $medium-gray;
        float: none;
        display: inline;
        &:last-of-type {
          border-right: 0.08rem solid $medium-gray;
        }
      }
      a {
        padding-bottom: 0.5rem;
        &:hover {
          border-bottom: 0.08rem solid #999;
        }
      }
    }
  }
}

F6sitesstickydisplay

Hi all 

Iv'e created a sticky navigation, in which i would like to have a logo above the nav, which then appears in the nav when scrolled (https://codepen.io/anon/pen/zqjmGv).

The issue I have is I am using display:none and then display:block along with visibility and opacity. I was expecting display none to remove the menu <li> completely and move the following <li> over, but this doesn't happen.

Anyone have any ideas please?

Thanks

Will

 

<div class="header">
  <!-- header -->
  <div class="row">
    <h1>Stickly</h1>
  </div>
</div>

<div id="page">
  <div class="nav-container" data-sticky-container>
    <!-- navigation -->
    <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
      <div class="menu row expanded">
        <ul class="inline-list">
          <li class="logo">Stickly</li>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="team.html">Team</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="content row panel">
    <!-- content -->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
  $color-primary-0:rgba(228, 87, 46, 1);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700,500,600,900|Patua+One);
$logoFont: 'Patua One',
cursive;
$baseFont: 'Source Code Pro',
sans-serif;
$black: #222;
$dark-gray: #444;
$medium-gray: #666;
$white: #fff;


body {
  position: relative;
  cursor: default;
  letter-spacing: 1px;
  cursor: default;
  font-family: $baseFont;
  font-weight: 300,
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  font-family: $logoFont;
}

a {
  font-style: italic;
}

ul {
  list-style: none outside;
}


/*-- header --*/

.header {
  position: relative;
  background: $black;
  height: 5rem;
  h1 {
    position: absolute;
    left: 42%;
    top: 50%;
    transform: translateY(-50%);
    color: $white;
  }
}

.sticky {
  background: $dark-gray;
  width: 100%;
}

.logo {
  color: $white;
  font-family: $logoFont;
  font-size: 1.2rem;
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: display 0s, visibility 0s, opacity 0.5s ease-in-out;
}

.is-stuck .logo {
    display: block;
    visibility: visible;
    opacity: 1;
}



/*-- menu --*/

.nav-container {
  transition: all 0.5s ease;
}

.menu {
  width: 100%;
  background: $dark-gray;
  height: auto;
  .inline-list {
    text-align: center;
    margin: 0;
    padding: 0;
    li {
      width: 100%;
      padding: 0.3rem 1.2rem;
      float: none;
      display: inline-block;
    }
    a {
      background: transparent;
      color: #999;
      padding: 0.6rem 1rem;
      &:hover {
        color: darken($white, 55%);
        transition: all 500ms ease-in-out;
        /* easeInOutCubic */
      }
    }
  }
  .active a {
    color: darken($white, 55%);
  }
}


/*-- content --*/

.content {
  padding: 2.5rem 0 2rem;
  p {
    padding: 0 0.6rem;
    text-indent: 2rem;
  }
}

@media only screen and (min-width: 40.063em) {
  /*-- header --*/
  .header {
    height: 6rem;
    h1 {
      left: 45%;
    }
  }
  /*-- menu --*/
  .menu {
    padding-top: 1.4rem;
    height: 5rem;
    .inline-list {
      li {
        padding-top: 1.6rem;
        padding-bottom: 1.8rem;
        border-left: 0.08rem solid $medium-gray;
        float: none;
        display: inline;
        &:last-of-type {
          border-right: 0.08rem solid $medium-gray;
        }
      }
      a {
        padding-bottom: 0.5rem;
        &:hover {
          border-bottom: 0.08rem solid #999;
        }
      }
    }
  }
}