Keeping the Menu from scrolling with page

  • My menu and logo is scrolling with the page. I don’t mind but it is making it impossible to get to some of the menu items.
    here is the css for the logo
    .masthead {
    background:url(‘http://f16exhibition.files.wordpress.com/2012/02/200pximagelogo.png’) no-repeat scroll 0 0 transparent;
    height:189px;
    }

    #main-nav {
    width:200px!important;
    float:left;
    position:fixed;
    margin:0 1.5em -20px 2.5em !important;
    }

    The blog I need help with is: (visible only to logged in users)

  • Sorry, I’ve been really sick lately. It appears like you got this issue fixed though.

  • no worries, I appreciate all your input. The menu and logo still scroll with the page, any ideas?

  • “position: fixed” should make something stick without scrolling. When I test in Chrome, it’s working how you described and the logo ( this http://f16exhibition.files.wordpress.com/2012/02/200pximagelogo.png ) as well as the left menu (home, about, artists) are staying in place when I scroll. That’s not what’s happening for you? What browser and browser version are you using?

  • I do see that the content is somehow wacky and scrolls horizontally underneath the logo/menu stuff. Is that what you are talking about?

  • Yes that is the logo and the left menu that I am referring to. yeah actually it scrolls horizontally and vertically. I have tried this on both safari and google chrome (All are the most up to date versions) and it always seems to scroll when I move down the page.

  • It works for me (no scrolling) in a few different browsers.

    What browser and browser version are you using?

  • @designsimply, if you go to the main page, narrow the browser window to where there is a scrollbar at the bottom of the window and then scroll horizontally back and forth you will see that the content will scroll back and forth over the logo and menu.

    This is actually a problem with Oulipo in its standard form as the demo site exhibits this same behavior. I see it in Safari 5.1.2 and FF 10 on my Mac. With a narrowed browser window and the content scrolled to the left so that it can be read, the menu and site title/logo actually overlay the post content.

  • any word designsimply

  • I think this is normal behavior for fixed position elements in browsers. If you minimize the browser so that it’s much smaller than the allotted space then scrollbars will appear and it’s possible for things to overlap.

    If you really want to avoid that, you could removed the fixed positioning as a workaround or you could make the width of the theme smaller. However, I think it’s an edge case that people would have their desktop browsers set so small and they also scroll right so far that it becomes a problem for readers.

  • The topic ‘Keeping the Menu from scrolling with page’ is closed to new replies.