Menu icon Foundation

My Posts




My Comments

Rescue Themes commented on Dustin Dahlberg's post almost 5 years

Thanks Marc.

Just missing the closing quotation:

<nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">

Rescue Themes commented on Chris Promotional's post almost 5 years

Not sure if there was an update to WordPress but just this seems to work for me now:

add_action('wp_head', 'add_header_styles');

function add_header_styles() {
  if ( is_admin_bar_showing() ) {?>
    <style>
    @media screen and (max-width: 600px){
      #wpadminbar {position: fixed !important; }
    }
    </style>
  <?php }
}

Rescue Themes commented on Juan Rendon's post about 5 years

It seems that Top Bar will be available again soon so it might be best to just wait for the update:

http://foundation.zurb.com/forum/posts/19125-v543-is-out-download-page-still-gives-v540

Rescue Themes commented on Eric Wallace's post about 5 years

Hi Rafi,

Any insight on when this will be updated?

Rescue Themes commented on Rescue Themes's post about 5 years
Rescue Themes commented on Luca Spanò's post about 5 years

Looks like this is a known issue and will be brought back in the next update:

https://github.com/zurb/foundation/issues/5464

Rescue Themes commented on Rescue Themes's post over 5 years

Just updating my progress on this in case someone else comes across it. Using animate.css, I'm getting a decent fade effect when the nav sticks to the top of the page using the following css:

.fixed {
    animation-duration: 0.8s;
    animation-name: fadeIn;
}

http://daneden.github.io/animate.css/

Rescue Themes commented on Jeff Mackey's post over 5 years

Because it's not good practice to modify core WordPress functionality, you can also do a search for the following in "foundation.js":

sticky_class:"sticky" 

Then replace the class name with whatever you'd like and use that same class name for your navigation. Obviously the scss method is preferred but for those who aren't using that method, this might be a better alternative than using a WP function.

Rescue Themes commented on Cris Woler's post over 5 years

To answer my own question:

.top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.top-bar .toggle-topbar.menu-icon a {
    color: #FFFFFF;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}

Rescue Themes commented on Cris Woler's post over 5 years

I'm woefully behind on SCSS so I'm not sure how to resolve this with my vanilla CSS download of Foundation. Can anyone point me in the right direction on how to apply this patch to my non-Sass implementation?

Posts Followed








Following

    No Content

Followers

My Posts

My Comments

You commented on Dustin Dahlberg's post almost 5 years

Thanks Marc.

Just missing the closing quotation:

<nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">

You commented on Chris Promotional's post almost 5 years

Not sure if there was an update to WordPress but just this seems to work for me now:

add_action('wp_head', 'add_header_styles');

function add_header_styles() {
  if ( is_admin_bar_showing() ) {?>
    <style>
    @media screen and (max-width: 600px){
      #wpadminbar {position: fixed !important; }
    }
    </style>
  <?php }
}

You commented on Juan Rendon's post about 5 years

It seems that Top Bar will be available again soon so it might be best to just wait for the update:

http://foundation.zurb.com/forum/posts/19125-v543-is-out-download-page-still-gives-v540

You commented on Eric Wallace's post about 5 years

Hi Rafi,

Any insight on when this will be updated?

You commented on Rescue Themes's post about 5 years
You commented on Luca Spanò's post about 5 years

Looks like this is a known issue and will be brought back in the next update:

https://github.com/zurb/foundation/issues/5464

You commented on Rescue Themes's post over 5 years

Just updating my progress on this in case someone else comes across it. Using animate.css, I'm getting a decent fade effect when the nav sticks to the top of the page using the following css:

.fixed {
    animation-duration: 0.8s;
    animation-name: fadeIn;
}

http://daneden.github.io/animate.css/

You commented on Jeff Mackey's post over 5 years

Because it's not good practice to modify core WordPress functionality, you can also do a search for the following in "foundation.js":

sticky_class:"sticky" 

Then replace the class name with whatever you'd like and use that same class name for your navigation. Obviously the scss method is preferred but for those who aren't using that method, this might be a better alternative than using a WP function.

You commented on Cris Woler's post over 5 years

To answer my own question:

.top-bar .toggle-topbar.menu-icon a:after {
    box-shadow: 0 10px 0 1px #FFFFFF, 0 16px 0 1px #FFFFFF, 0 22px 0 1px #FFFFFF;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.top-bar .toggle-topbar.menu-icon a {
    color: #FFFFFF;
    height: 34px;
    line-height: 33px;
    padding: 0 25px 0 0;
    position: relative;
}

You commented on Cris Woler's post over 5 years

I'm woefully behind on SCSS so I'm not sure how to resolve this with my vanilla CSS download of Foundation. Can anyone point me in the right direction on how to apply this patch to my non-Sass implementation?

Posts Followed

Following

  • No Content

Followers

  • No Content