Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Problem with sticky Class in wordpress #155

Closed
rabendeviaregia opened this issue Nov 24, 2014 · 5 comments
Closed

Problem with sticky Class in wordpress #155

rabendeviaregia opened this issue Nov 24, 2014 · 5 comments

Comments

@rabendeviaregia
Copy link

Hello,
i try to use the sticky top-bar and it works fine but...
in wordpress the class sticky it's used to the sticky post...
in the foundation site say: "Top bar supports data-options configuration."
i try to add this
data-options="sticky_class:'mystickyclass'"
but dosnt work
any idea?

@manwithacat
Copy link
Contributor

In addition to setting the new class via the javascript data option, you also need to override the variable used in _settings.scss:

// Sticky Class
$topbar-sticky-class: ".mystickyclass";

See also: Foundation docs on Topbar

@rabendeviaregia
Copy link
Author

Yes, I did, but it does not work. It seems that the changes did not take
this is my code

<div class="top-bar-container contain-to-grid mystickyclass show-for-medium-up" role="navigation"  >
    <nav class="top-bar" data-topbar data-options="sticky_class:'mystickyclass'"  >
        <ul class="title-area">
    <li class="name"><!-- Leave this empty --></li>

         </ul>
        <section class="top-bar-section">
            <?php foundationPress_top_bar_l(); ?>
            <?php foundationPress_top_bar_r(); ?>
        </section>
    </nav>
</div>

@linuxbastard
Copy link
Contributor

Hi,

I edited the top-bar.php as follows:

<div class="top-bar-container contain-to-grid mystickyclass show-for-medium-up">
<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        </li>
    </ul>
    <section class="top-bar-section">
        <?php foundationPress_top_bar_l(); ?>
        <?php foundationPress_top_bar_r(); ?>
    </section>
</nav>
</div>

moved the role="navigation" into the nav element instead of the wrapping div and it fixed it on my end, can you try it on yours and see if it works?

Also please make sure you un-commented the sticky line in _settings.scss line 1426

// Sticky Class
$topbar-sticky-class: ".mystickyclass";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item

@rabendeviaregia
Copy link
Author

As described in the instructions (http://foundation.zurb.com/docs/components/topbar.html#
and http://zurb.com/article/1180/how-to-use-foundation-4-s-faster-better-a), you can change the stickyclass, through the use of date-options
I tried to see if some data-options would work and such data-options = "is_hover: false" works perfectly.
If you try with data-options="sticky_class:'mystickyclass';" does not work, Obviously I changed the line in _settings.scss
It would appear that this particular data-options does not work
The only way is to edit the file app.js but according to the instructions of foundation is not correct to do this.
any idea?

@Anydog
Copy link

Anydog commented Apr 19, 2015

Yeah -- I need solution for this, too ... anyone ?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants