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; }
 

 

The quick way is to work out a suitable width for the ul tag to suit all the li tags and use margin; auto like this (I used 480 px which is a little more than needed);

 

#sticky_navigation ul { list-style:none; margin:0; padding:5px; background: lime; width: 480px; margin: 0 auto; }

 

but it does mean a fixed width.

 

Or you could use item 4 here:

http://www.wickham43.net/dropdownmenus.php

which uses an extra div; one has left: 50% which puts the left edge at the center (but this div has no border and no background-color so it is invisible) and the ul div inside has left: -50% to drag it back left by the same amount which results in it being centered and this is more flexible.

Don't use the .css method on jQuery if possible.

Use the addClass method instead then apply the css in your stylesheet to that classname. You want to position it as I show below, then nest another div inside with the properties I've assigned to the center class and this will then work.

Generally it's better to keep your styles and Js separate, the CSS method produces inline styles which have super high specificity which is bad and difficult to override in your styles.

 

If the width of the sticky nav is unknown and you need it centered: Assign it the property and value of: display: inline-block;. Then in it's parent which has the class of fixed - assign the property and value of: text-align: center.

CSS:

.fixed {   
   position: fixed;   
   top: 0;   
   right: 0;   
   left: 0;
}
.fixed .center {   
   width: 500px;   
   margin: 0 auto;
}

JS

var sticky_navigation = function(){   
   var scroll_top = $(window).scrollTop();   
   if (scroll_top > sticky_navigation_offset_top) {      
      $('#sticky_navigation').addClass('fixed');   
   } else {      
      $('#sticky_navigation').removeClass('fixed');   
   }
};

Edited December 20, 201312 yr by rbrtsmith

I have a similar issue, which rbrtsmth's info above helped me to center it.

Here: https://www.computers-for-everyone.com/DELETE.html

 

When the page is scrolled, how should I get it to stay in the same position from the left as the original (when the browser is over 700px wide).

 

Thanks for any help.

 

​Here's a pic for when I remove the link.

 

menu-fixed{background-color: #FFF;text-align:center;} works so far to provide the background and center it.

 

(Sorry, I forgot to add this info when I posted the above this morning before work.)

 

I'm curious how to keep it aligned from the left, like it is when at the top of the page.

Edited December 8, 20169 yr by Grant Barker

Is it a deal breaker that the static menu on scroll is in the center? (Jumps to the center)

On the PC it's a little annoying because it is clearly not in the same position as before the page scroll, but on smaller tablets and other mobile devices the centering isn't such a visual change.

I'd appreciate knowing what you ladies and gents would do in this situation, please.

 

​sample page

Edited December 9, 20169 yr by Grant Barker