[Hoepfi]

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 😉

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]

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]

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.