danblukk

Using available code, Ive have a sticky menu that sticks to the top of the page when the user scrolls using JQuery. But for the world of me I just cant get it to centre, it stays left. I've tried padding but that messes up the JQuery bit. I just want it centred under my title and to stay centred when scrolled. I've tried text-align:center with margin:0 auto, I've tried creating a new div id with rules margin:auto; text-align:center; and setting the width but it just wont centre. I've got everything the way I want it except this one thing. can anybody help? Heres the code i have JQuery <script> $(function() { // grab the initial top offset of the navigation var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; // our function that decides weather the navigation bar should have "fixed" css position or not. var sticky_navigation = function(){ var scroll_top = $(window).scrollTop(); // our current vertical position from the top // if we've scrolled more than the navigation, change its position to fixed to stick to top, // otherwise change it back to relative if (scroll_top > sticky_navigation_offset_top) { $('#sticky_navigation').css({ 'position': 'fixed', 'top':0 }); } else { $('#sticky_navigation').css({ 'position': 'relative' }); } }; // run our function on load sticky_navigation(); // and run it again every time you scroll $(window).scroll(function() { sticky_navigation(); }); }); </script> HTML <div id="demo_top_wrapper"> <!-- a header with a logo just to have some content before the menu --> <!-- this will be our navigation menu --> <div id="sticky_navigation_wrapper"> <div id="sticky_navigation"> <div class="demo_container"> <div id="demo_container"> <ul> <li><center><a href="#">About Me</a></center></li> <li><center><a href="#">My Work</a></center></li> <li><center><a href="#">Experience</a></center></li> <li><center><a href="#">Contact Me</a></center></li> </ul> </div> </div> </div> </div> </div><!-- #demo_top_wrapper --> CSS #demo_container { margin:auto; text-align:center; } .demo_container { width:980px; } #demo_top_wrapper { margin:0 0 20px 0; } #demo_top { height:100px; padding:20px 0 0 0; } #my_logo { font:70px Georgia, serif; } /* our menu styles */ #sticky_navigation_wrapper { margin:0 auto; width:100%; height:50px; } #sticky_navigation { text-align:center; margin:0 auto; width:auto; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre } #sticky_navigation ul { list-style:none; margin:0; padding:5px; } #sticky_navigation ul li { margin:0; padding:0; display:inline; } #sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }