Menu icon Foundation

Coder | Everett, WA

My Posts




My Comments

Jonas Allen commented on Jonas Allen's post almost 3 years

I finally figured out the solution thanks to the help I got on Stack Overthrow at, https://stackoverflow.com/questions/40271460/jquery-is-not-working-on-my-wordpress-site/40277877#40277877. Thank you Ryan McCready for your help!
 
Bellow is the code that I went with that works great for me:
jQuery(window).scroll(function() {
var psad_scroll = jQuery(this).scrollTop();
var psad_nav = jQuery( ".psad-nav" );
var psad_nav_button = jQuery( ".psad-nav-button" );

function psad_show_nav() {
    if (Foundation.MediaQuery.atLeast( "medium" )) {
        psad_nav.show();
        psad_nav_button.addClass( "hide" ) ;
    }
}

function psad_hide_nav() {
    if (Foundation.MediaQuery.atLeast( "medium" )) {
        psad_nav_button.removeClass( "hide" );
        psad_nav.hide();
    }
}

if (psad_scroll >= 30) {
    psad_hide_nav();
    psad_nav_button.on({
        click: psad_show_nav,
        mouseenter: psad_show_nav
    });

}
if (psad_scroll < 30) {
    psad_show_nav();
}

});
Would this be the best way to achieve what I was looking for? If not, how would you accomplish this?

Jonas Allen commented on Jonas Allen's post almost 3 years

"init.js" is this codes bellow:
jQuery(window).scroll(function() {
if (scroll >= 50) {
jQuery('.psad-nav-button').show()
jQuery(".psad-nav").hide()
}
if (scroll < 50) {
jQuery(".psad-nav").show()
jQuery('.psad-nav-button').hide()
}
});
I am using it manipulate the code bellow:
<div data-sticky-container>
<div data-sticky data-options="marginTop:0;" data-sticky-on="small" style="width:100%">
<div class="title-bar psad-nav" data-responsive-toggle="top-bar-menu" data-hide-for="<?php echo $breakpoint ?>">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title"><?php _e( 'Menu', 'jointswp' ); ?></div>
</div>

<div class="top-bar psad-nav" id="top-bar-menu">
<div class="top-bar-left show-for-<?php echo $breakpoint ?>">
<?php do_action( 'psad_site_logo', '200px' ); ?>
</div>
<div class="top-bar-right">
<?php joints_top_nav(); ?>
</div>
</div>
<button class="psad-nav-button expanded button" type="button">
^ Navigation ^
</button>
</div>
</div>
I want to hide the class ".psad-nav" and show the class ".psad-nav-button", when I scroll down the page. You can view the source code of the website at, "http://twps.psadeaf.org/v3/". So I am hiding the Navigation when scrolling down the page which is sticking to the top to be replaced by a button that will reaveal the menu again when clicked on or hovered over.
Thank you for your help!

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Jonas Allen's post almost 3 years

I finally figured out the solution thanks to the help I got on Stack Overthrow at, https://stackoverflow.com/questions/40271460/jquery-is-not-working-on-my-wordpress-site/40277877#40277877. Thank you Ryan McCready for your help!
 
Bellow is the code that I went with that works great for me:
jQuery(window).scroll(function() {
var psad_scroll = jQuery(this).scrollTop();
var psad_nav = jQuery( ".psad-nav" );
var psad_nav_button = jQuery( ".psad-nav-button" );

function psad_show_nav() {
    if (Foundation.MediaQuery.atLeast( "medium" )) {
        psad_nav.show();
        psad_nav_button.addClass( "hide" ) ;
    }
}

function psad_hide_nav() {
    if (Foundation.MediaQuery.atLeast( "medium" )) {
        psad_nav_button.removeClass( "hide" );
        psad_nav.hide();
    }
}

if (psad_scroll &gt;= 30) {
    psad_hide_nav();
    psad_nav_button.on({
        click: psad_show_nav,
        mouseenter: psad_show_nav
    });

}
if (psad_scroll &lt; 30) {
    psad_show_nav();
}

});
Would this be the best way to achieve what I was looking for? If not, how would you accomplish this?

You commented on Jonas Allen's post almost 3 years

"init.js" is this codes bellow:
jQuery(window).scroll(function() {
if (scroll >= 50) {
jQuery('.psad-nav-button').show()
jQuery(".psad-nav").hide()
}
if (scroll < 50) {
jQuery(".psad-nav").show()
jQuery('.psad-nav-button').hide()
}
});
I am using it manipulate the code bellow:
<div data-sticky-container>
<div data-sticky data-options="marginTop:0;" data-sticky-on="small" style="width:100%">
<div class="title-bar psad-nav" data-responsive-toggle="top-bar-menu" data-hide-for="<?php echo $breakpoint ?>">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title"><?php _e( 'Menu', 'jointswp' ); ?></div>
</div>

<div class="top-bar psad-nav" id="top-bar-menu">
<div class="top-bar-left show-for-<?php echo $breakpoint ?>">
<?php do_action( 'psad_site_logo', '200px' ); ?>
</div>
<div class="top-bar-right">
<?php joints_top_nav(); ?>
</div>
</div>
<button class="psad-nav-button expanded button" type="button">
^ Navigation ^
</button>
</div>
</div>
I want to hide the class ".psad-nav" and show the class ".psad-nav-button", when I scroll down the page. You can view the source code of the website at, "http://twps.psadeaf.org/v3/". So I am hiding the Navigation when scrolling down the page which is sticking to the top to be replaced by a button that will reaveal the menu again when clicked on or hovered over.
Thank you for your help!

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content