Sticky header with responsive design?

[sabby]

I am designing my first responsive website. So far I have images that stretch to the width of the browser and I've got different layouts for different break points. Yay! But I also want to have a sticky header (I want the navigation bar and logo to stay visible while scrolling). I've read the forums and  now I'm confused. A lot of the entries are really old and I'm not sure if the answers are still correct. I think you need to use scroll effects to create a sticky header and scroll effects don't work in a variable width site. However pinning seems to affect this (but not in the way I would like). I had to pin my navigation bar to the right for it to stretch to the right when you enlarge the browser. This made the navigation bar stop scrolling and show up behind my other items lower on the page. It's almost what I want but sadly it is behind my other items. I've watched videos on pinning and this isn't behaving how I would expect. My nav bar is on the master page and it shows up behind things that are on the other pages so I don't see how layering could be the problem. So my question is, can I really not have a sticky header and also a variable width structure to my website? It seems like a really common thing for people to want. Here is a screen shot of my header and then the page when you scroll.

scrolling down...

[fotoroeder]

Most important for sticky header: place your header elements on your master in a/the top layer.

Pin your stuff as needed, but all to the top of course (left-center-right).

On your pages don´t place any elements that should be below/under/behind the header into this layer.

Layers work site wide and not only page wide.

Best Regards,

Uwe

[sabby]

Thank you very much. Such a beginner mistake, I thought the master page would automatically be on top.

Sabrina

[Günter Heißenbüttel]

sabby  schrieb

Thank you very much. Such a beginner mistake, I thought the master page would automatically be on top.

Sabrina

Interesting: In print design, everybody expects the master page elements are in the background, in web design many users assume, that master page elements are on top.

Both isn‘t viable for Muse. As already stated, master pages are working site-wide, and this has to work this way.

You must be able to place elements in the background of every page, and you must be able to place elements in front of all layout page elements, like menus.

In Muse master page elements can be placed before/behind every other layout page element. It is only a matter of layering.

[fotoroeder]

Beginners are highly welcome here .

Best Regards,

Uwe