Note that there are some explanatory texts on larger screens.

plurals
  1. POFloating navigation menu using Wordpress Twenty Eleven theme
    primarykey
    data
    text
    <p>I'm currently developing a site using the WordPress Twenty Eleven theme and I would like to have the main navigation bar stick to the top of the screen once it has been scrolled past, just like the paragraph on the right side of this page <a href="http://fiddle.jshell.net/zsJAr/show/light/" rel="nofollow">http://fiddle.jshell.net/zsJAr/show/light/</a>.</p> <p>So far I have added code in the header to include jQuery just after the opening head tag:</p> <pre><code>&lt;?php wp_enqueue_script("jquery"); ?&gt; </code></pre> <p>And later I have included my javascript before the closing head tag:</p> <pre><code>&lt;script type="text/javascript" src="&lt;?php bloginfo("template_url"); ?&gt;/js/moveScroller.js"&gt;&lt;/script&gt; </code></pre> <p>The contents of moveScroller.js is:</p> <pre><code>var $j = jQuery.noConflict(); $j(window).load(function(){ $j(function() { var a = function() { var b = $j(window).scrollTop(); var d = $j("#access-anchor").offset({scroll:false}).top; var c=$j("#access"); if (b&gt;d) { c.css({position:"fixed",top:"0px"}) } else { if (b&lt;=d) { c.css({position:"relative",top:""}) } } }; $j(window).scroll(a);a() }); }); </code></pre> <p>The "access" and "access-anchor" IDs are declared further down in the following block:</p> <pre><code>&lt;div id="access-anchor"&gt;&lt;/div&gt; &lt;nav id="access" role="navigation"&gt; &lt;h3 class="assistive-text"&gt;&lt;?php _e( 'Main menu', 'twentyeleven' ); ?&gt;&lt;/h3&gt; &lt;?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?&gt; &lt;div class="skip-link"&gt;&lt;a class="assistive-text" href="#content" title="&lt;?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?&gt;"&gt;&lt;?php _e( 'Skip to primary content', 'twentyeleven' ); ?&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="skip-link"&gt;&lt;a class="assistive-text" href="#secondary" title="&lt;?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?&gt;"&gt;&lt;?php _e( 'Skip to secondary content', 'twentyeleven' ); ?&gt;&lt;/a&gt;&lt;/div&gt; &lt;?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?&gt; &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary' ) ); ?&gt; &lt;/nav&gt;&lt;!-- #access --&gt; </code></pre> <p>This seems to be having no effect whatsoever and I'm not really not sure how to go about this. With fairly little experience using WordPress, I would really appreciate some help on the matter. Does anyone have any idea how to go about this?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload