Turning off stickiness

[markus]

I have a stupid question. You showed me how to make a second navbar sticky man y months ago, and it worked. Now the client wants that to be turned off site wide. What is an easy way to do that? I included a link to a page on my dev site.

It’s the black bar below the main nav that I need to scroll up like the rest of the page’s content.

Thanks for all your excellent support!

---

[Support]

Hello,

The easiest way would be just hide that with a CSS:

body.sticky-menu-active section.sticky-top {
    display: none;
}

(Or you could just revert the changes I sent to you at that time)

Let me know if you have any questions.

Thanks.

---

[markus]

Thank you, turning it off with CSS works fine. I think the more elegant solution is to reverse what you showed me, I can’t find the CSS or JS. Weird no? Here is what I have:

<section class="page-top sticky-top">
	    <div class="container">
	        <div class="row">
	            <div class="col-md-12 center">
	                <h2 class="tinos">Community</h2>
	                <p class="hide-sticky">Stay up to date with what’s going on at Walinga. You can also upload your own pictures to our Owners’ Gallery, follow our tradeshow schedule, meet our team, and contact us if you'd like.</p>
	                <nav class="nav-main secundary">
	                    <ul class="nav nav-pills nav-main">
	                        <li> <a data-hash href="#tradeshows">Tradeshows</a> </li>
	                        <li> <a data-hash href="#announcements">Announcements</a> </li>
	                        <li> <a data-hash href="#news">Industry News</a> </li>
	                        <li> <a data-hash href="#sideroads">Side Roads</a> </li>
	                        <li> <a data-hash href="#links">Links</a> </li>
	                        </ul>
	                    </nav>
	                </div>
	            </div>
	        </div>
	    </section>

Here is the custom.js:

/* My JS customizations */

/* 
var stickySidebar = $(".sticky-sidebar"),
	stickySidebarWrapper = $(".sticky-sidebar-wrapper"),
	checkStickySidebar = function() {

	if($(window).scrollTop() > (stickySidebar.offset().top - 10) && $(window).width() > 991) {

		stickySidebarWrapper.addClass("sticky");

	} else {
	
		stickySidebarWrapper.removeClass("sticky");

	}

}

$(window).on("scroll", function() {
	checkStickySidebar();
});

$(window).on("resize", function() {
	checkStickySidebar();
});

stickySidebar.css("min-height", stickySidebar.height());
stickySidebarWrapper.css("min-width", stickySidebar.width());
checkStickySidebar();

*/

$(document).ready(function() {

    var owl = $("#owlCarouselWithArrows");

    owl.owlCarousel({
        items: 3
    });

    // Custom Navigation Events
    $(".owl-carousel-arrows .next").click(function() {
        owl.trigger('owl.next');
    });
	
    $(".owl-carousel-arrows .prev").click(function() {
        owl.trigger('owl.prev');
    });

});

The only reference I have to what you showed me to implement the sticky bar was from this link:http://www.okler.net/forums/topic/create-a-secondary-nav-bar-that-is-sticky/

Did you send me another way to do it? I can’t find that email… Sorry to be a pain.

---

[markus]

I found the Post you used to help me: http://www.okler.net/forums/topic/adding-to-the-persistent-global-navbar/#post-10000808

---

[Support]

Hello, so you can just remove the JS part:

/* 
var stickySidebar = $(".sticky-sidebar"),
	stickySidebarWrapper = $(".sticky-sidebar-wrapper"),
	checkStickySidebar = function() {

	if($(window).scrollTop() > (stickySidebar.offset().top - 10) && $(window).width() > 991) {

		stickySidebarWrapper.addClass("sticky");

	} else {
	
		stickySidebarWrapper.removeClass("sticky");

	}

}

$(window).on("scroll", function() {
	checkStickySidebar();
});

$(window).on("resize", function() {
	checkStickySidebar();
});

stickySidebar.css("min-height", stickySidebar.height());
stickySidebarWrapper.css("min-width", stickySidebar.width());
checkStickySidebar();

*/

The style will remain the same.

Let me know if you have any questions.

---

[markus]

I must be doing something wrong, sorry. I removed that code from custom.js and the black bar is still being ‘sticky’

http://markus-id.com/dev/walinga/ete/community/index.html

---

[Support]

Hello, Oh, OK, but you still need to add that CSS:

body.sticky-menu-active section.sticky-top {
    display: none;
}

You need to add that because the page-top is part of the header, and it’s sticky by default.

Please add that and let me know if the problem persists.

Thanks.

---

[markus]

Great, many thx!

---

[Author]

Posts