Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Making a menu that doesn't move

  1. notchangingmyname
    Member

    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.

  2. timethief
    Member

    There is no such thing as a "sticky menu".

  3. timethief
    Member

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

  4. notchangingmyname
    Member

    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

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

  6. notchangingmyname
    Member

    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.

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

  8. timethief
    Member

    Thank you for the correction.

  9. notchangingmyname
    Member

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

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

  11. notchangingmyname
    Member

    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!

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

  13. notchangingmyname
    Member

    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!

  14. notchangingmyname
    Member

    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.

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

  16. notchangingmyname
    Member

    :-) thank you so much for your help

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags