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

  • Hoepfi



    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 πŸ˜‰


    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?



    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.



    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.
Graphene Themes Forum