Making a menu that doesn't move

  • Author
  • #980842

    So, the reason I really liked the Vintage Camera theme was because the menu on the bottom stays static even while you’re scrolling. Love that. Reminds me of frames. But there are some other things I don’t like about the theme, so I’m going to switch to a different theme over the weekend.

    My question is, is the “sticky” menu possible in ANY theme provided that you write the correct css?

    The link below is another example of a menu that stays put while you’re scrolling, this time on the top.

    I would really love to add something like that to my blog. I figured let me ask you guys now, before I choose a theme.


    The blog I need help with is



    There is no such thing as a “sticky menu”.



    These are themes with custom menus >


    Hi timethief,

    Lol it may not actually be called a sticky menu, but if you go to my site right now you will see that the menu bar on the bottom doesn’t move while you scroll. THAT is the effect that I am looking to achieve with CSS. I’d like to know if it’s possible.




    The site you posted the link to is not a free hosted blog. You can’t use CSS editing to edit the way any theme is designed to function.

    Click my username please and note the custom menu on the top of my blog remains exactly where it is on the Twenty Eleven theme. Then click this link to my personal blog wearing a different theme Sundance and note that the custom menu on the top of that blog stays where it is as well.


    You right, the site I linked was just an example.

    But since the free WordPress theme that I’m currently using, Vintage Camera, DOES allow for the custom menu that is always visible regardless of where you are on a page, I was hoping that it was something that could be achieved with CSS. But I guess you’re saying it can’t…that sucks, but thanks anyway for the info.



    @notchangingmyname: Timethief doesn’t know CSS. Fixing the menu to the bottom of the browser window as in Vintage Camera is possible in any theme.



    Thank you for the correction.


    lol Thanks justpi! I’ll be looking for your reply when I post my “how do I fix the menu to the bottom of the browser window” question in the next few days! :-)



    You’re welcome. Next few days I won’t be around much, so I’ll give you the basics here. Basics is this:


    The menu selector varies from theme to theme (if I take as an example the two themes TT mentioned in her unbelievable reply, in 2011 the selector is #access and in Sundance it’s .main-navigation). Also, in many themes you’ll need additional rules to modify the horizontal positioning and the styling of the menu (for instance add a bg color and/or a border).


    lmaooo thanks justpi!

    One more thing…I had already asked this in the CSS fourm, but now I’d like some verification from someone who actually knows CSS…is it possible to use CSS to change the way the archives are presented? Right now, when you click on my archives you see the entire posts, and I would like it just to be excerpts. Thanks!



    1) You can’t use CSS editing to turn full posts to excerpts on archive pages. I mean, you can limit the post content to a fixed height and hide the rest of the content, but you cannot create read-more links: functions such as this are defined in the underlying files of the theme, which we cannot access. So you can create excerpts of sorts but not decent excerpts. You need one of the themes that displays auto excerpts by default or one of the themes that supports custom excerpts.
    2) If, on the other hand, you’d settle for titles only instead of titles plus excerpts, that’s possible. Try this (in Vintage Camera):

    .archive .entry-content {


    You are awesome. But I already switched to the Twentyten theme. And with your code I fixed the menu to the bottom…smh lol…one more question, since you’re around, how can I make the black color of the menu extend all the way across? Thanks!


    PS – I added the code “width:100%;” to my menu, so now it stretches to the right, but there’s still a gap on the left.



    Adding “width:100%;” is correct; you need this as well:

    You’ll also need something like this, so that the menu items won’t start where the browser window starts:

    #access .menu-header, {
    margin: auto;


    :-) thank you so much for your help

The topic ‘Making a menu that doesn't move’ is closed to new replies.