How to separate Top Bar & Header from the rest of the page?

  • Hoepfi

    #9452

    Hi!

    How can I separate the Top Bar & the header from the rest of the page, to have a fixed top-bar and header, so it doesn’t move along when scrolled?

    Like this 😉

    51970,homepageWBYN3.jpg

    This is some custom-css I tried, but it doesn’t work quite well. 🙁

    #header-menu-wrap {
    margin-top: 249px !important;
    width: 960px;
    position: fixed !important;
    }

    #container {
    margin-top: 50px;
    }

    #top-bar {
    margin-top: 1px;
    height: 54px;
    width: 960px;
    position: fixed !important;
    }

    #header {
    margin-top: 50px;
    height: 198px;
    width: 960px;
    position: fixed !important;
    overflow: hidden;
    }

    Any advice or is this to complicated to do?

    Anonymous

    #43625

    Check out this tutorial by one of the developers but it’s only for the navigation bars below the header. Maybe you can try around to also include the header.

    http://www.prasannasp.net/fixed-position-graphene-theme-header-menu/

    Hoepfi

    #43626

    Thanks, I used the idea of custom-CSS from your link. I can fix the top-bar, header and menu. But the content or container flows into the header. 🙁

    I can’t let the example go only the whole time, cause this is our business homepage, so I can’t show the problem exactly.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.