Bootstrap affix'd menu not working in WP


#1

I have converted a theme to WP and 99.99% done apart from one thing, the affix class in the menu won’t work e.g. when you scroll down the page the menu won’t stick

I have a menu which I have assigned the affix class using the JS and the data-spy methods but it doesn’t work, there are no JS errors in my console (firefox or chrome) and the js and css of BS are at 3.3.1, the files are all enqueued and everything else works fine.

I have deactivated all the plugins (although none use BS), I have deleted all the other scripts I enqueued

The URL is http://wpthemes4u.co.uk/demo/wordpress/conceito/

It works fine on the html version at http://acrocapoeira.com/conceito/

Navigation HTML:


My Affix JS is:

jQuery('#nav').affix({
  offset: {
   top: 580
  }
 });

Anyone able to point me in a direction to find the cause?


#2

bump, anyone able to help pinpoint this issue?


#3
faevilangel_designs said

bump, anyone able to help pinpoint this issue?

Yea, check out the Bootstrap documentation, aside the JS or data triggering, you need to use some CSS classes for your navbar in order for it to work. You should also check their examples on fixed navbar.


#4

From the BS website on affix:

Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's CSS).

Look at my html demo or http://jsfiddle.net/skelly/df8tb/

Look at the nav class as you scroll it changes, on my theme it doesn’t which is making me point at something wrong with the JS

I have done everything from replacing all the BS files, attaching the affix.js file (even though it’s not needed) to adding my own affix code (using jQuery scroll) and even using google’s jQuery.

I am confused why this won’t work, only thing I can think of is some WP JS script is playing havoc with mine.

Has anyone else had this issue and can point me in the direction to fix this? It’s so frustrating