Making a menu that doesn't move

  • Author
    Posts
  • #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.

    http://cupcakesandcashmere.com/

    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.

    Thanks!

    The blog I need help with is notchangingmyname.com.

    #980952

    timethief
    Member

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

    #980953

    timethief
    Member

    These are themes with custom menus > http://theme.wordpress.com/themes/features/custom-menu/

    #980962

    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.

    Thanks

    #980965

    timethief
    Member

    The site you posted the link to is not a free hosted wordpress.com blog. You can’t use CSS editing to edit the way any wordpress.com 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.

    #980973

    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.

    #980977

    justpi
    Member

    @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.

    #980979

    timethief
    Member

    Thank you for the correction.

    #980986

    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! :-)

    #980994

    justpi
    Member

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

    MENU SELECTOR HERE {
    position:fixed;
    bottom:0;
    }

    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).

    #981046

    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!

    #981052

    justpi
    Member

    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 {
    	display:none;
    }

    #981054

    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!

    #981055

    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.

    #981060

    justpi
    Member

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

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

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

    #981062

    :-) thank you so much for your help

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